I have trying to put a navigation bar under the picture on the top of my page. Otherwise everything is fine, but Firefox places the the bar clearly closer to the top than IE. This happens both when I use absolute and relative positioning. What can I do to get the bar to the same distance from the image?
I know the answer is something really simple but I just cannot get it...
Here is the HTML:
*
Title

text
And here is the CSS:
BODY {background: #082811;
margin: 0px;
padding: 0px;
text-align:center}
#container {background-color: #ffffff;
width: 800px;
height: 470px;
margin:0px auto;
padding:0px;
position: relative;
text-align:left;
top:50px}
#ylakuva {position: relative;
top:left;
margin:0px auto;
padding:0px}
#navigointi
{width: 120px;
white-space: nowrap;
font:11px verdana,arial,sans-serif;
margin:0px;
padding:0px;
position: absolute;
top:130px}
#navigointi ul {list-style: none;margin: 0px 10px 10px 10px;padding: 0px 0px 7px 0px;
border-bottom: 1px solid #D7E8C1;font-weight: bold;
text-align: center}
#navigointi ul li {display: inline;margin: 0px}
#navigointi li a {text-decoration: none;padding: 0px 8px 3px;
border-bottom: 4px solid #FFF;color: #999}
#navigointi a#current{border-color: #F60;color: #06F}
#navigointi li a:hover {border-color: #FFCC00;color: #666}
#navigointi li a {background: #FFFFFF; color: #082811;}
#teksti {position: absolute;
top: 80px;
left: 118px;
right: 118px}
#otsikko {position: absolute;
top: 120px;
left: 10px}
#leipateksti {position: absolute;
top: 160px;
left: 10px}
#osoite1 {position: absolute;
top: 175px;
left: 10px}
#osoite2 {position: absolute;
top: 175px;
left: 200px}
#osoite3 {position: absolute;
top: 120px;
left: 398px}
img {padding-left: 0px;
padding-bottom: 0px;
border: 0px;
margin:0px;}
h1 {font:20px verdana,arial,sans-serif}
p {font:12px verdana,arial,sans-serif; text-align:justify}
Sticky!
Thanks for reading them.
HTML and CSS between <code> tags
Oops - sorry!
Title

text
BODY {background: #082811;
margin: 0px;
padding: 0px;
text-align:center}
#container {background-color: #ffffff;
width: 800px;
height: 470px;
margin:0px auto;
padding:0px;
position: relative;
text-align:left;
top:50px}
#ylakuva {position: relative;
top:left;
margin:0px auto;
padding:0px}
#navigointi
{width: 120px;
white-space: nowrap;
font:11px verdana,arial,sans-serif;
margin:0px;
padding:0px;
position: absolute;
top:130px}
#navigointi ul {list-style: none;margin: 0px 10px 10px 10px;padding: 0px 0px 7px 0px;
border-bottom: 1px solid #D7E8C1;font-weight: bold;
text-align: center}
#navigointi ul li {display: inline;margin: 0px}
#navigointi li a {text-decoration: none;padding: 0px 8px 3px;
border-bottom: 4px solid #FFF;color: #999}
#navigointi a#current{border-color: #F60;color: #06F}
#navigointi li a:hover {border-color: #FFCC00;color: #666}
#navigointi li a {background: #FFFFFF; color: #082811;}
#teksti {position: absolute;
top: 80px;
left: 118px;
right: 118px}
#otsikko {position: absolute;
top: 120px;
left: 10px}
#leipateksti {position: absolute;
top: 160px;
left: 10px}
#osoite1 {position: absolute;
top: 175px;
left: 10px}
#osoite2 {position: absolute;
top: 175px;
left: 200px}
#osoite3 {position: absolute;
top: 120px;
left: 398px}
img {padding-left: 0px;
padding-bottom: 0px;
border: 0px;
margin:0px;}
h1 {font:20px verdana,arial,sans-serif}
p {font:12px verdana,arial,sans-serif; text-align:justify}
Fix up the doctype first,
Fix up the doctype first, then see what happens in IE.
done
So the right doctype should be this?
Done, but the described difference still exists. However, it changed another minor detail better
Why bother with absolute
Why bother with absolute positioning? Lose it all, it seems highly unnecessary.
the distance between the image and the navigation bar
I would be happy to loose it, but in IE there is otherwise too much difference between the image and the navigation bar. The distance in Firefox is perfect.
Is there some other solution that AP to reduce the distance in IE? Margins and paddings are already 0.
You shouldn't need any type
You shouldn't need any type of positioning, they should sit directly underneath each other anyway.
Give me a minute, I'll tweak your code.
In fact, if you could attach
In fact, if you could attach that main image, and any other necessary images, it would help.
the image attached
Here is attached the only image of the page.
Attachment | Size |
---|---|
ylakuva2.jpg | 32.45 KB |
Ok, use this as a base: h1
Ok, use this as a base:
h1 {
background: #fff url(images/main_image.jpg) no-repeat;
width: 800px;
height: 127px;
text-indent: -9999em;
margin: 0;
}
body {
background: #082811;
margin: 0px;
padding: 0px;
text-align:center
}
#container {
background-color: #ffffff;
width: 800px;
height: 470px;
margin:0px auto;
padding:0px;
position: relative;
text-align:left;
top:50px;
}
ul#navigointi {
font: 11px verdana, arial, sans-serif;
list-style: none;
margin: 0;
padding: 0;
border-bottom: 1px solid #D7E8C1;
font-weight: bold;
text-align: center;
overflow: auto;
}
ul#navigointi li {
margin: 0;
}
#navigointi li a {
float: left;
display: block;
text-decoration: none;
padding: 0px 8px 3px;
border-bottom: 4px solid #FFF;
background: pink;
color: #082811;
}
#navigointi a#current { border-color: #F60; color: #06F;}
#navigointi li a:hover {border-color: #FFCC00; color: #666;}
#otsikko {
background: grey;
}
#leipateksti {
background: pink;
}
h2 {font:20px verdana,arial,sans-serif}
p {font:12px verdana,arial,sans-serif; text-align:justify}
Title
Neuvosto
Headline
text
problem solved
This is a very interesting way to solve the problem. Thank you so much. You are great
:D
You can style it to your needs now, I've just given you a better way of laying out the basic elements.
let us know if there's anything else we can help you with.