By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,493 Members | 1,936 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,493 IT Pros & Developers. It's quick & easy.

Need workaround for IE5 miscalculating percentage widths

P: n/a
I'm trying to move to using tableless page layouts, but I've come across
what appears to be a bug in IE5's rendering that I can't find a way to
overcome.

The page has a sidebar to the left of the main content area. The main
content are has several subsections, each of which starts with a mini-menu
of four links. I want to have these laid out across the full width of the
column.

Here's an ASCII attempt to show the desired page layout:

+-----------------------------------------------+
| P A G E T I T L E |
+---+-------------------------------------------+
| S | Content section title |
| I | Subsection title |
| D | Option Option Option Option |
| E | One Two Three Four |
| B | subsection content |
| A | ... |
| R | ... |
+---+ |
| Subsection title |
| Option Option Option Option |
| One Two Three Four |
| subsection content |
| ... |
| ... |
+-----------------------------------------------+
| Page footer |
+-----------------------------------------------+

I've been been attempting to do this by having each option as an inlined
<div>, floated left, with a width of 25% and centred text. The four
options are then contained within a parent div, also floated left, with a
width of 100%. This works in Gecko-based browsers and Opera, but doesn't
in IE5 - the menu extends off to the right of the viewport.

The CSS standard says, for percentage widths, "The percentage is
calculated with respect to the width of the generated box's containing
block". It looks like IE5 is ignoring this and calculating the
percentages with respect to the viewport width.

Is there a way to work around this problem? I've spent ages trying to
fool IE into calculating the correct widths, but couldn't work out a way.

A simplified version of the source for my page is below. I've cut out
as much extraneous stuff as possible, but it's still quite long - sorry.

Thanks in advance for any suggestions.

<?xml version="1.0" encoding="us-ascii"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<style type="text/css">
@media screen, print
{
body {
margin: 10px;
text-align: center;
}
div, h1, h2, h3, p {
padding: 0em;
border: 0em;
margin: 0em;
}
p {
padding: 0.5em 0em;
}
div#container {
border: 1px solid grey;
margin: 1em auto;
text-align: left;
width: 100%;
}
div#title {
background-color: #DDDDDD;
border-bottom: 1px solid grey;
text-align: center;
}
div#sidebar {
float: left;
border-bottom: 1px solid grey;
border-right: 1px solid grey;
padding: 1em;
width: 12em;
}
div#content {
margin-left: 14em;
padding: 1em;
}
div#footer {
clear: both;
padding: 0.5em;
background-color: #DDDDDD;
border-top: 1px solid grey;
}
div.options {
float: left;
width: 100%;
}
div.option {
display: inline;
float: left;
text-align: center;
width: 25%;
}
}
</style>
</head>
<body>
<div id="container">
<div id="title">
<h1>Title</h1>
</div>
<div id="sidebar">
<h2>Sidebar</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nullam scelerisque aliquet est. Sed turpis nisl, egestas at,
luctus nec, dapibus non, nunc. Ut augue. Etiam porttitor
urna ac quam. Nunc sapien. Integer est.
</p>
<p>
Aliquam aliquet. Phasellus a turpis. Phasellus ultricies
dapibus elit. Pellentesque vitae orci malesuada est
imperdiet scelerisque. Maecenas cursus dignissim nunc.
</p>
</div>
<div id="content">
<h2>Main content section</h2>
<div id="vp-list">
<h3>Subsection One</h3>
<div class="options">
<div class="option">
<a href="#">Link 1.1</a>
</div>
<div class="option">
<a href="#">Link 1.2</a>
</div>
<div class="option">
<a href="#">Link 1.3</a>
</div>
<div class="option">
<a href="#">Link 1.4</a>
</div>
</div>
<p>
Fusce quis elit et diam condimentum accumsan. Nullam
erat odio, viverra non, ornare fermentum, dictum vitae,
diam. Nunc quam tortor, bibendum vitae, dignissim nec,
accumsan eget, enim. Morbi vitae dolor ac nisl
ullamcorper viverra. Praesent vel velit. Curabitur eu
arcu sed dui dictum tempor. Aenean lectus lectus, mattis
eu, accumsan et, pulvinar at, urna. Donec quis dui. Nunc
ullamcorper massa eu lacus. Vestibulum non velit.
Suspendisse accumsan nulla in dui.
</p>
<p>
Nulla dolor tellus, pharetra nec, sagittis malesuada,
semper eget, massa. Donec wisi enim, blandit sit amet,
commodo sit amet, vulputate sit amet, pede. Vivamus
hendrerit. Aliquam eu neque. Morbi sed urna. Aenean
euismod scelerisque turpis. In hac habitasse platea
dictumst. Sed pulvinar tempus sem. Fusce tincidunt,
quam at congue vestibulum, sem libero commodo odio,
vel consequat orci elit quis purus.
</p>
<h3>Subsection Two</h3>
<div class="options">
<div class="option">
<a href="#">Link 2.1</a>
</div>
<div class="option">
<a href="#">Link 2.2</a>
</div>
<div class="option">
<a href="#">Link 2.3</a>
</div>
<div class="option">
<a href="#">Link 2.4</a>
</div>
</div>
<p>
Proin velit augue, consequat eget, faucibus nec, tempor
non, sapien. Ut mattis lobortis nibh. Nulla tempus nulla
vel sem. In nonummy enim eget est. Praesent fermentum
dolor a est. Aenean id lectus a sem ultricies molestie.
Curabitur aliquam lacinia felis. Suspendisse malesuada
arcu et wisi vehicula vestibulum. Integer mauris massa,
gravida a, dapibus eu, venenatis et, sapien. Nam vitae
risus a elit consequat pharetra. Proin pretium. Morbi
fermentum dapibus sapien. Aliquam dolor.
</p>
<p>
Morbi porta, dolor quis adipiscing aliquam, libero metus
cursus magna, in pretium dolor pede eget libero. Donec
quis dolor. Pellentesque ultrices aliquam tellus. Nam
ipsum. Morbi ultricies. Donec blandit, velit et porta
blandit, erat ligula vestibulum erat, at tempus massa
est ac odio. Donec sit amet ligula id wisi scelerisque
sodales. Suspendisse vestibulum ipsum at nibh. Proin
fermentum justo sed quam.
</p>
</div>
</div>
<div id="footer">
<h2>Footer</h2>
<p>
Phasellus sit amet lorem id pede tempus mattis. Sed varius
scelerisque erat. Donec pulvinar, odio sit amet congue
vulputate, erat ipsum fermentum leo, non ullamcorper lacus
magna at quam. Donec vel orci ut neque pulvinar vestibulum.
Aliquam et ante non metus aliquet sodales. Praesent sapien
nunc, varius vitae, imperdiet quis, iaculis eu, tellus.
Sed lorem. Duis eu arcu sed magna consectetuer dictum.
Pellentesque eget odio. Quisque cursus nonummy lacus. Donec
tempus. Integer ornare, mi nec commodo auctor, dui nunc
rhoncus nibh, in aliquet odio orci id lacus. Donec aliquam,
metus id sodales fringilla, leo erat porttitor nibh, ut
lobortis tortor turpis et nunc.
</p>
</div>
</div>
</body>
</html>

Cheers,

- olly

--
Oliver Burnett-Hall
rot13://by**@oheargg-unyy.pb.hx
Jul 20 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
In article Oliver Burnett-Hall wrote:
I'm trying to move to using tableless page layouts, but I've come across
what appears to be a bug in IE5's rendering that I can't find a way to
overcome.

The four
options are then contained within a parent div, also floated left, with a
width of 100%. This works in Gecko-based browsers and Opera, but doesn't
in IE5 - the menu extends off to the right of the viewport.
Wy do you float the container?
The CSS standard says, for percentage widths, "The percentage is
calculated with respect to the width of the generated box's containing
block". It looks like IE5 is ignoring this and calculating the
percentages with respect to the viewport width.
IE5 has broken box modell, it counts margin and padding and border to
width, so it might be just that it thinks width of container is same as
viewport. Use another container or tantek hack.
A simplified version of the source for my page is below. I've cut out
as much extraneous stuff as possible, but it's still quite long - sorry.
URL would be better. Especially as you used XHTML and didn't tell how you
serve it. There is no easy way to try thise things using IE, so I looked
only in Opera...
Thanks in advance for any suggestions.

div.option {
display: inline;
float: left;
text-align: center;
width: 25%;
}


Well, this pointless use of display:inline and float could be problem
too. You have a block element. Then you make it inline element. THen you
float it, which also means that it will be block again.

Width don't apply to inline-elements. OTOH, IE5 don't usually get that,
so it would strange it would be reason now.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Jul 20 '05 #2

P: n/a
On Sat, 24 Jan 2004 16:19:55 +0200, Lauri Raittila wrote:
In article Oliver Burnett-Hall wrote:
The four
options are then contained within a parent div, also floated left, with
a width of 100%. This works in Gecko-based browsers and Opera, but
doesn't in IE5 - the menu extends off to the right of the viewport.
Wy do you float the container?


It seemed like a good idea at the time :) I've spent so long trying to
get this to work on all browsers that I've forgotten what the reasons for
various bits are.

But I agree - floating the container is unnecessary. I'm almost certain I
tried doing it without floating the container div, and it still wasn't
working on IE5. When I'm back at work I'll try this again to confirm (I
don't have IE at home to test with).
IE5 has broken box modell, it counts margin and padding and border to
width, so it might be just that it thinks width of container is same as
viewport. Use another container or tantek hack.
It's not that in this case; in the full version of the page I'm already
using the Tantek hack to give correct width to the left-hand section. I
removed it from the simplified version of the page as it didn't make any
difference to this problem.
URL would be better. Especially as you used XHTML and didn't tell how
you serve it. There is no easy way to try thise things using IE, so I
looked only in Opera...
Okay, try http://www.burnett-hall.co.uk/~ojbh/misc/width.html. Though
this isn't the same as the production environment; it's for the intranet
at work where the content is dynamically generated using XSLT (transformed
using MSXML, served by IIS).
div.option {
display: inline;
float: left;
text-align: center;
width: 25%;
}


Well, this pointless use of display:inline and float could be problem
too. You have a block element. Then you make it inline element. THen you
float it, which also means that it will be block again.


Heh. That probably explains the dizziness - I've been going round in
circles.
Width don't apply to inline-elements.


Yeah, I know - that's why I floated it. On Monday I'll get rid of this
display: inline and see if it has any affect (but I doubt it will).

Cheers,

- olly

--
Oliver Burnett-Hall
rot13://by**@oheargg-unyy.pb.hx

Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.