SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
Hi all check out this link in Internet explorer 6 or 7 on the PC. Also refer to it in Firefox or Safari to see how its supposed to be.
Under the Enquiries heading I have several list items. All floated left then with classes that clear either left or right so that they are equally levelled. Problem is one of the cheeky blighters is bursting out of the container. I’ve checked widths and floats and all that stuff but its still popping out in IE!
Also I have a subnav that is absolutely positioned near the bottom of the page that isn’t appearing in IE 6.
Aaaaaalso I’m using siFR render my H2 and H3 and its not working in IE 7 of all things!
Quite a pickle all round!
-
- CommentAuthoraxe_sosharp
- CommentTimeFeb 20th 2007
As usual IE makes a mess of things. I had a similar problem a while back and found IE managed to understand it if you floated everything left!
Here is some code to test out. (Note I simplified the CSS and HTML to remove unnecessary classes.) It worked in IE6-7 and FF2.
CSS
body{font-size:62.5%;}/*just for test purposes*/
ul {
list-style: none;
}
li {
margin-left: 0;
}
ul#cluster {
width: 320px;
height: 1%;
}
#cluster li {
float: left;
font-size: 85%;
line-height: 1.4em;
padding-bottom: 0;
padding-top: 0;
display: block;
padding-right: 10px;
width: 150px;
}
ul#cluster h4 {
text-transform: uppercase;
margin: 0 0 -.8em 0;
padding: 0;
font-size:1.2em;
font-family: "Gill Sans", "Gillsans", Trebuchet MS;
width150px; /*width added */
}
#cluster li p{width:150px;font-size:1.2em;} /* added for test purposes*/
</style>
html
<ul id="cluster">
<li>
<h4>UK Head office</h4>
<p>Chalfont House, Oxford Road
Denham UB9 4DX, UK<br />
Tel: +44 (0)8708 300 350<br />
Fax: +44 (0)8708 300 352<br />
<a href="mailto:enquiries@zoffany.uk.com">enquiries@zoffany.uk.com</a></p>
</li>
<li>
<h4>London showroom</h4>
<p>Chelsea Harbour Design Centre
Lots Road, London SW10 0XE<br />
Tel: +44 (0)8708 300 060<br />
Fax: +44 (0)20 7351 9677<br />
<a href="mailto:enquiries@zoffany.uk.com">enquiries@zoffany.uk.com</a></p>
</li>
<li>
<h4>USA Corporate office</h4>
<p>285 Grand Avenue
3 Patriot Centre , Englewood
New Jersey 07631, USA<br />
Tel: 800 894 6185<br />
Fax: 800 894 6098</p>
</li>
<li>
<h4>New York showroom</h4>
<p>Suite 409 D&D Building
979 Third Avenue
New York NY 10022<br />
Tel: 800 395 8760<br />
Tel: (001) 212 319 7220<br />
Fax: (001) 212 593 6184 </p>
</li>
<li>
<h4>Contracts</h4>
<p>Chalfont House, Oxford Road
Denham UB9 4DX, UK<br />
Tel: +44 (0)8708 300 036<br />
Fax: +44 (0)8708 300 037</p>
</li>
</ul> -
The list items were floated left, I gave them seperate classes of right and left to clear the appropriate side so that it would achieve a grid like layout. Like this image. I realise its being very picky but I just want to know why it won’t wotk now!
I can actually float the left ones left and the right ones right and it looks ok but not in a grid.
!http://www.kreateagency.co.uk/~zoffanyc/images/grid-like.gif!
-
Cracked it, added this to my IE/Win stylesheet
<pre>#content #cluster li { display: inline-block;
} #content #cluster li { display: inline; float: none; clear: none;
} #content #cluster li h4, #content #cluster li p { width: 150px;
} #content #cluster li p { height: 9em;
}</pre>Thats sorted it
-
- CommentAuthoraxe_sosharp
- CommentTimeFeb 21st 2007
Apologies was a spot of word blindness, read clear:right as float:right.
Having said that if you check the code posted in IE6, the New York Showroom details appear on the second line as required. It should be fairly easy to position the containers to get the effect you require.
1 to 5 of 5