IE7 and 100% widths

  LeadingMNMs 21:51 31 Dec 06
Locked

Ok, I'm in the process of updating a site I created for a charity a while ago, voluntarily of course. My main aim was to create something slightly more consistant and hopefully more adtaptable than the mess I put together first time around.

The site: click here

The problem is that the article headings do not display correctly in IE7, with the background colour and bottom border only continuing until the end of the text. I've check it in a few of the other major browsers (Firefox, Opera, Mozzila/SeaMonkey, Netscape) and they all display it as intended, ie. to the end of the right 'outer' border.

The code is generated by PHP and I've not put many newline characters in, so I wouldn't recommend looking at the actual code.

The basic structure of each article is,

div class="article">
div class="articleHeading">
 $heading
/div>
div class="articleBody">
Body text, images etc
/div>

And the relevant CSS,

.article{
margin:0px;
margin-top:20px;
width:95%;
border-color:#003366;
border-width:2px;
border-style:solid;
padding:0px;
clear:both;
}

.articleHeading{
width:100%;
background-color:#FFCC00;
border-bottom-color:#003366;
border-bottom-style:solid;
border-bottom-width:2px;
color:#003366;
padding-top:5px;
padding-bottom:5px;
font-weight:bold;
}

.articleBody{
width:100%;
color:#003366;
padding:5px;
font-weight:normal;
margin-top:0px;
}

Both the (X)HTML and CSS validate on the W3 validators and I haven't found anything searching for similar problems.

My guess would be a problem with IE7, but hopefully someone has come across this before and has found a work round, since most people using the site will do so from IE.

PS. Can't believe I haven't been on these forums since March !

  LeadingMNMs 21:53 31 Dec 06

The "article" div tag should be closed, managed to miss it in the copy and paste.

  LeadingMNMs 22:07 31 Dec 06

Nevermind lol, fixed it myself. The problem was that the parent of the parent "article" div (the div tags I didn't mention), had no width set. So the "article" div was 95% of nothing, so it scaled to something appropriate, and likewise with the heading div tag.

This thread is now locked and can not be replied to.

How to get Windows 10 for free | How to install Windows 10: There is still a way to avoid paying…

1995-2015: How technology has changed the world in 20 years

Alex Chinneck’s giant ice cube Christmas tree at Kings Cross

Apple rumours & predictions 2017: The iPhone 8, new iPads, and everything else you should expect fr7…