PDA

View Full Version : Large gap between Divs on IE



n9ne
Mar 30th, 2007, 12:06 AM
Hi everyone, Im new here and new to CSS!

Tonight i finally decided it was high time i started to learn how to build websites the modern way. I've been getting on alright, however when it came to testing what i'd made so far in FF and IE there was a difference between both browers.

Whilst FF displays the page correctly, IE is giving me a rather large gap between two of my divs.

See for yourself (http://www.21stcenturydoctorwho.com/test/test.htm)
Link to the CSS (http://www.21stcenturydoctorwho.com/test/style.css)

Im hoping that perhaps someone could point out whats wrong, i understand what i've done so far is probably gonna be kinda crap, but im a beginner so i guess i have an excuse! :cool:

Excavator
Mar 30th, 2007, 01:40 AM
Hello n9ne,
I don't think I've ever seen padding used quite like that. Didn't study it to see what it was doing ... maybe that was intentional.

Anyway, I changed some CSS a little. To get your menu back up you'll need to re-arrange your markup.

Replace your CSS with this:

body {
margin: 0;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #666666;
}
#wrapper {
width: 760px;
margin: 0 auto;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
border-bottom: 2px solid #000000;
}
#header2 {
background-image: url(images/s3_templayout.jpg);
background-repeat: no-repeat;
background-position: center top;
width: 760px;
height: 365px;
}
#header {
background-image: url(images/21head.gif);
background-repeat: no-repeat;
background-position: center top;
width: 760px;
height: 37px;
}
#content {
margin-left: 230px;
padding: 20px 10px 0 0;
}
#content p {
font-size: 80%;
line-height: 1.8em;
padding-left: 2em;
}
#content h1 {
font: normal 180% Georgia, "Times New Roman", Times, serif;
color: #B51032;
background-color: transparent;
}
#content h2 {
font-size: 120%;
color: #940D1E;
background-color: transparent;
border-bottom: 1px dotted #FF9006;
}
#navigation {
width: 760px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
background-color: #d96726;
background-repeat: no-repeat;
border-bottom: 5px solid #bf5a21;
padding-top: 5px;
padding-bottom: 5px;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 5px;
padding-top: 5px;
}
#navigation li {
display: inline;
}
#navigation a:link, #navigation a:visited {
padding: 3px 10px 2px 10px;
color: #FFFFFF;
background-color: #d96726;
text-decoration: none;
border: 1px solid #d96726;
}
#navigation a:hover {
color: #FFFFFF;
background-color: #bf5a21;
}
#footer {
padding: 0 0 10px 255px;
font-size: 70%;
color: #AAAAAA;
background-color: transparent;
}

n9ne
Mar 30th, 2007, 02:04 AM
Thank you very much for your help! That seems to have sorted out the problem :)


Hello n9ne,
I don't think I've ever seen padding used quite like that. Didn't study it to see what it was doing ... maybe that was intentional.

Hmmm, well you know more than me, when code doesnt work cause im just an impatient designer first and a 'coder' second i just play around with things until they work. Maybe i messed it up a little :)