5 replies [Last post]
CSSnoob
Offline
newbie
Last seen: 13 years 35 weeks ago
Joined: 2007-01-18
Posts: 9
Points: 0

Hi,

Currently doing my first CSS styled site, and i'm having a problem with gaps showing up between divs in ie7. in Firefox it comes out fine, without any gaps between the logo, search div and navigation bar.

i've done some searches in the forums and with Google, but not finding what i need. maybe i'm not using the right key words?

anyways, i've attached a screen cap of the problem.

here is the css

body { margin: 0; padding: 0; text-align: center; background: #CCCCCC; color: #00AA00; }

#header
{
position: relative;
padding:0;
}

#logo
{
float: left;
left: 0px;
top: 0px;
width: 500px;
margin: 0;
padding: 0;
border: 0;
}

#search
{
height: 180px;
margin: 0;
padding: 0;
border: 0;
background: #003399;
}

#search form
{
text-align: right;
padding: 80px 100px 0px 0px;
}

#nav
{
margin: 0;
padding: 0;
background: #000077 url("img/nav.gif") 0 0 repeat-x;
float: left;
width: 100%;
}

#nav li
{
display: inline;
padding: 0;
margin: 0;
}

#nav a:link,
#nav a:visited
{
color: #EEEEEE;
background: #000077;
padding: 55px 20px 8px 20px;
float: left;
width: auto;
text-decoration: none;
font: 14px Trebuchet MS, Arial, Helvetica, sans-serif;
}

#nav a:hover
{
color:#f32fff;
background: #66ff33;
}

and here is the html:


website














anyway. i hope its something simple i've forgotten, and appreciate any help you can give me.

E.

AttachmentSize
problemcss.jpg27.23 KB
Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Try setting your inline

Try setting your inline foreground images to display:block;

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

CSSnoob
Offline
newbie
Last seen: 13 years 35 weeks ago
Joined: 2007-01-18
Posts: 9
Points: 0

Not sure what you mean?

Not sure what you mean?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

img

img {display:block;}

or

img {vertical-align:bottom;}

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 30 weeks 6 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

And get a doctype!

And get a doctype!

Verschwindende wrote:
  • CSS doesn't make pies

CSSnoob
Offline
newbie
Last seen: 13 years 35 weeks ago
Joined: 2007-01-18
Posts: 9
Points: 0

thanks guys... the img

thanks guys...

the img display:block got rid of the horizontal line, while the doctype got rid of the vertical one... thanks a million.

E