12 replies [Last post]
kasi
Offline
newbie
Helsinki
Last seen: 14 years 43 weeks ago
Helsinki
Joined: 2007-09-09
Posts: 6
Points: 0

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


image
Headline

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}

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 10 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Sticky!

Thanks for reading them.

Verschwindende wrote:
  • CSS doesn't make pies

kasi
Offline
newbie
Helsinki
Last seen: 14 years 43 weeks ago
Helsinki
Joined: 2007-09-09
Posts: 6
Points: 0

HTML and CSS between <code> tags

Oops - sorry!

Title




image
Headline

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}

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 10 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Fix up the doctype first,

Fix up the doctype first, then see what happens in IE.

Verschwindende wrote:
  • CSS doesn't make pies

kasi
Offline
newbie
Helsinki
Last seen: 14 years 43 weeks ago
Helsinki
Joined: 2007-09-09
Posts: 6
Points: 0

done

So the right doctype should be this?

Done, but the described difference still exists. However, it changed another minor detail better Smile

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 10 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Why bother with absolute

Why bother with absolute positioning? Lose it all, it seems highly unnecessary.

Verschwindende wrote:
  • CSS doesn't make pies

kasi
Offline
newbie
Helsinki
Last seen: 14 years 43 weeks ago
Helsinki
Joined: 2007-09-09
Posts: 6
Points: 0

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.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 10 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

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.

Verschwindende wrote:
  • CSS doesn't make pies

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 10 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

In fact, if you could attach

In fact, if you could attach that main image, and any other necessary images, it would help.

Verschwindende wrote:
  • CSS doesn't make pies

kasi
Offline
newbie
Helsinki
Last seen: 14 years 43 weeks ago
Helsinki
Joined: 2007-09-09
Posts: 6
Points: 0

the image attached

Here is attached the only image of the page.

AttachmentSize
ylakuva2.jpg 32.45 KB
thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 10 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

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




Verschwindende wrote:
  • CSS doesn't make pies

kasi
Offline
newbie
Helsinki
Last seen: 14 years 43 weeks ago
Helsinki
Joined: 2007-09-09
Posts: 6
Points: 0

problem solved

This is a very interesting way to solve the problem. Thank you so much. You are great Smile

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 10 weeks 3 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

: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.

Verschwindende wrote:
  • CSS doesn't make pies