On 12 Oct 2004, at 5:34 PM, Lyn Patterson wrote:
Hi all
�I have a 3-col with header and footer layout main page I am re-doing with� CSS.
The jpg within the� header, positioned at the far left : In Mozilla/Firefox it is positioned within the header as it should be.� In IE and Opera it ends slightly below the header.� There should be enough room for it��� so am at a loss to work out why this is happening and how to prevent it.
Also, the left navbar in IE and Opera is too� far to the right encroaching on the center� column.�
www.mwg.green.net.au/testpages contains all files. www.mwg.green.net.au/testpages/basic5.html is the main page.
Any help would be appreciated.
Thanks.
Lyn Patterson
Hi Lyn
Here's a slightly more constructive response:
First, validate your code. Your DOCTYPE is incomplete; it needs a URL to point to its DTD:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd";>
This magically makes most browsers behave themselves a lot better!
Then, pull the jpeg out of the <h1>. Just let the <h1> follow the linked image in your code. You can tweak its margin/padding to get it to site where you want within div#header.
Remove the styling from the image file in the code to the CSS file; you can reference it specifically with
#header a img {...}
or give it an id or a class. You might also add an indication to the title attribute for it that it's a thumbnail linked to an enlarged version.
You have the height of div#header set as 8em - this may be causing problems with some browsers as '1em' is not going to be identical across the board. I appreciate that you're trying to build a liquid layout, but if you set the height to a minimum for the image - say 110px - you'll get better consistency across browsers. In any case, the DOCTYPE fix makes a big difference - I'm still seeing a slightly higher header div in Firefox and Safari than I am in IE5 (all on Mac), but it's maybe acceptable... if not, you'll find it's the padding on div#header that's causing the diffrence - try using padding on the div's content instead of the div itself, or else you'll need to hack it - it's a box model problem.
The <p> in div#header is coded with 'align="right"' in the markup, and {text-align: right;} in the CSS. Remove the attribute from the markup.
For ul.navbar, use the long form for the margins:
margin-top: -0.5em;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
That should fix its tendency to creep right in IE.HTH
Nick ___________________________ Omnivision. Websight. http://www.omnivision.com.au/
****************************************************** The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************
