Hi guys,
I've just started using div's and now the center column height sizes with the content size but the left and right column don't.
How can i fix this?
take a look: http://www.niekdepunder.nl/SH/
Overflow for FF
Try to add to your id="main" this property:
#main {
overflow: auto; /* for FF */
}
menu
thank you,
now it works in FF. But with IE7 in the menu under the webcam button I have a vertical line, don't know where this one is comming from. FF shows the menu perfectly.
any ideas?
No SPACE!
this line should be with no space!
like this:
thank you!
Thanks!
don't know why the other images show no line, cause i copy pasted the code.
anyway,. thankyou
One line!
Try to keep one line when you have images in your markup, and remove all extra spaces surrounding your images!
visaversa
thanks for your help.
the problem is that the line shows up in firefox now. I can't find out what the problem is, probably the same thing but i checked the lines.
What am I missing?
first of all ... try to keep
first of all ... try to keep all your content in columns! Any other margin or padding to your columns will affect the "main" container
IE broken layout and FF sroolbar warning!!!
Your html code is invalid. You are using the same id in different places!
Fix those problems first!
Valid
Valid now..
http://www.niekdepunder.nl/SH/index_old.html
With this old code the line is not visible in FF, but it is in IE.
I can't notice any differences in the code except for the two div's under the webcam button:
I haven't pinpointed the
I'm referring to your first link given and I haven't pinpointed the problem yet but I did notice something odd about your CSS code.
body {
background:#0e79bf url("../images/background.png") repeat-x;
font:12px Arial, Helvetica, sans-serif;
color:#003f5e;
line-height:140%;
margin:0 auto;
padding:0;
}
If your mess with the line-height here, the gap below your picture grows or shrinks depending on the direction you take with it.
And I think you need to maybe change all the id="menu" to class="menu", and then edit your CSS code to match to be more valid. Possibly change #menu to div.menu in your stylesheet.
And it would most likely be more helpful if you showed us your stylesheet.
it is not valid! Try to fix
it is not valid!
Try to fix the id's problems! ID is only for one element and you can apply CLASS on multiple elements!
and the same thing on my previous post NO SPACE!
with this layout fixed go and add content to your layout but constantly testing your file in IE6, IE7, FF, Opera or any other Browser you like
sorry guys, i think it was
sorry guys, i think it was the old version i uploaden just now.
The valid version is uploaden now, all the id's are unique en the space is gone.
stylesheet: http://www.niekdepunder.nl/SH/css/style.css
I just removed the line-height and the line is shrinking 1 or 2 px.
the css shows no errors.
First, let me apologize for
First, let me apologize for my tone. I just woke.
You're not using divs correctly, you're overusing them to a serious extreme.
Please read thepineapplehead's article on divitis and re-work your code so that you're using semantic tags.
The HTML of your navigation should look something like this:
Then use css to style each of its components. To do that you'll want to know how to tame lists (http://www.alistapart.com/articles/taminglists/) and how to replace images (http://www.mezzoblue.com/tests/revised-image-replacement/).
On a side note, don't break apart images into slices unless it's important to do so. There's no gain in download time to have 4 images for your header instead of one. However, there IS a tradition of having the logo be a link, so put the circle for schouwer hocck in one a seperate image and the rest in one image.
Then use image replacement for the logo so you can link to the home page and also have your business name actually prominent in Search Engine lookups.
Hope that helps,
LokiLoks
ok, thank you for your
ok, thank you for your advice, im gonna work that through now, see if it helps and I let you guys know.
THE LINE IS GONE!
I have removed the image line in the html and added a background image in the css. The line is gone in FF and IE7. :thumbsup:
Thank you for the advice about to many div's. I am working on that. I allready replaced the header for one bigger image instead of 3 little ones.
For the id's in the menu im gonna use one class to group the styles.
thank you again!
**********edit: used class="menu" instead of id=menu_1,2,3 etc... but then ff and IE showed lines between the buttons!!! so I'm gonna stick with this for now...
Mysterious gaps--a robust solution
Try to keep one line when you have images in your markup, and remove all extra spaces surrounding your images!
I'm coming to the party a bit late, but there is no need for creating difficult-to-read (by humans) formatting for a simple rendering issue. Removing the white space as you've done causes there to be no anonymous inline box. That, in turn, means there is no established baseline for the image to sit on. That will work okay, right up 'til someone adds a white space during some routine maintenance.
A more robust solution may be seen at this mysterious gap under images demo. View the source; note the formatting aimed at ease of readability and maintenance, with lot's of white space.
cheers,
gary
Float your images!
Yes my english in poor but i'm trying to help others!
I'm aware that The "Extra space remove" tip :rolleyes: it's not the final solution for all the problems. If you have the ability to "float" everything in your page then please float your images and this will remove any extra space!