alignment problems in Opera

large gap between header and content

[badams1]

I have got a page setup and it looks like it is supposed to in firefox, but in IE6 everything is a little out of whack, but not bad. In Opera 7.23 it is bad. You can see everything but the first line is about 100px below the menu, but it is supposed to be about 5px below the menu. Here is my css:

div {
position:relative;
text-align:justify;
font-size: 12px;
}
#wrapper {
position: relative;
display: block;
width:751px;
margin:0 auto;
margin-top: 0;
} 
#header {
position: relative;
border: none;
}
#headerpicture {
top: 0;
left: 0;
margin: 0;
border: 0;
padding: 0;
position: relative;
}
#menu {
position: relative;
top: 0px;
}
#right {
position: absolute;
margin-top: 20px;
margin-left: 509px;
width: 241px;
height: 380px;
}
#left {
margin-right: 40%;
}
#middle {
position: relative;
top: 0px;
width: 129px;
margin-left: 350px;
border: 0;
}
#email {
position: absolute;
top: 285px;
width: 129px;
margin-left: 330px;
}
#bottom {
font-size: 9px;
width: 751px;
}
#hot {
margin-left: 55px;
width: 90px;
}
#apply {
height: 29px;
margin-left: 285px;
}
#stuemail {
position: relative;
top: 110px;
width: 150px;
margin-left: 255px;
}
#empemail {
position: relative;
top: 96px;
width: 150px;
margin-left: 350px;
}
#middle {
position: relative;
font-size: 10px;
}

I'me still a CSS newbie so don't be too hard on me. I've just been picking up bits and pieces of it.

Thanks

[badams1]

forgot to mention in the first post.

that at least 95% of the users use IE 6, 2% use IE 5.x, 2% use Safari, and 1% use Firefox.

So the opera issue isn't a big deal since I have yet to see anyone using it.

I was initially trying to design it so it would work in all browsers, but since my userbase is so high in IE should I design it for it?

thanks again.

[Arno_Adams]

Without seeing your HTML it's hard to say.

And I noticed you forgot to specify units (px) in #wrapper, #headherpicture.

HTH, AA

[badams1]

ok here is part of the html
----------------------

<div id="right"><img src="buttons.gif" alt="#" width="241" height="380" longdesc="links.html"></div>
<div id="left"><strong>MISSION STATEMENT:</strong> Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt.<br>
<a href="/" target=_blank>Strategic Plan</a><br>
</div>
<div id="apply"><a href="/" accesskey="a" target="_blank"><img src="image.gif" alt="#" width="150" height="29" border="0"></a></div>
<div id="hot"><img src="image.gif" alt="#" width="90" height="26"></div>
<div id="email"><strong>Email</strong> </div>
<div id="stuemail"><a href="/" accesskey="s" title="#">Student Email</a></div>
<div id="empemail"><a href="/" accesskey="e" title="#">Employee Email</a></div>
<img src="pic.gif" alt="#" width="223" height="168">
<div id="left">
<FORM method=GET action=link to google>
<A HREF=link to google accesskey="g"> <IMG SRC="link to logo" ALT=Google border="0"></a>
<label for="Google">
<INPUT TYPE=text name=q id="Google" size=31 maxlength=255 value="">
</label>
<INPUT type=submit name=sa VALUE="Search">
<input type=hidden name=domains value="....">
<br>
<label for="searchGoogle">
<input type=radio name=sitesearch id="searchGoogle" value="">
Search Google</label>
<label for="searchMSC">
<input type=radio name=sitesearch id="searchMSC" value="mscok.edu" checked>
Search MSC</label>
</form>
</div>
<div id="bottom">Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt, foo text....</div>
</div>

i have a drop-down menu system that is up above the following code, but didn't post it cause it is full of links.

[edited by: SuzyUK at 9:25 am (utc) on Dec. 9, 2004]
[edit reason] examplified, specifics removed [/edit]

[Arno_Adams]

Please validate your code.

And do not use <STRONG> tags to make text bold, they're interpreted different by other user-agents.

HTH, AA

[SuzyUK]

badams1. the problem is not evident with this code, I think the use of relative positioning in some cases is possibly not necessary, and that the content may be placing itself relatively according to where the bottom of the "dropdowns" are in opera,

try removing:
div {
position:relative;
text-align:justify;
font-size: 12px;
}

from the CSS temporarily, then comment out position relative in all other divs (except wrapper)

AA

And do not use <STRONG> tags to make text bold

There is no reason you cannot use <strong>, especially if using XHTML, if you're worried about cross browser formatting, then just style it to bold using CSS. Strong is suuposedly more "semantically" correct for the text browsers and screen readers.. same with <em> for <i>

and it is also not necessary to use units on "0" zero values

badams, let us know if removing that position relative helps.. you will require to leave the wrapper as relative if you are using position absolute inside it {e.g. the "right" div)}

also I note though that you have used <div id="left"> more than once. ID is a unique identifier and should be used only once per page, if you want to use it multiple times change it to a class..

<div class="left"> and css: .left {rules}

Suzy

[badams1]

well that fixed the gap Opera had, but IE shifted everything way to the right.

but while I was typing this message I played around with it some and got all of them (firefox, IE, Opera) looking the same now.

thanks so much Suzy.

just one more thing, how do I get my banner at the top to have a 0 margin? If you note in the css there I have a margin-top: 0; , but that is not working. I thought it did at one time, but I've messed with it so much that I'm not sure what works anymore.

[SuzyUK]

Great.. glad that bit works..

how do I get my banner at the top to have a 0 margin?

first thought, have you zeroed the html and body defaults?
e.g.
html, body {margin: 0; padding: 0; border: 0;}

second thought, what is the HTML for the header/banner div, is there just an image in it or is there anything e.g. <h1> or <p> in it that would have default margins on it?

Suzy

[badams1]

had to read your post a couple of times for it to sink in Suzy.

I was thinking you were saying to put margin in the html instead of the body css. Once I put it into body {margin-top:0;} everything works.

thanks again.

[Hester]

Use zero padding and margins on both <html> and <body> for full browser compatibility.