Tue, 2005-09-20 10:17
I couls use some help on a site I'm developing. The page is:
Viewed in IE it displays 'correctly' in that it is how it is meant to be displayed. However, if you view it in FF or Opera, the results are less than desirable. I spent about 20 minutes searching through the code and couldn't find the cause of the problem, so I turn to you now.
Tue, 2005-09-20 12:02
#1
IE strikes again with 2px of vengance
Rule #1: Develop in Firefox and fix for IE. Its much much easier that way. IE has lots of idiosyncrosies and most of the time you aren't fixing things for Firefox, Opera, Safari, etc, but trying to fix IEs problems looking at other browsers - which is kind of backwards 
For this:
- you need to clear the footer; #footer {clear:both;}
- either, unfloat #myRight, or assign widths to both #myRight & #myLeft
- assign an overflow value (auto or hidden) to #myContainer or apply the clearfix.
Tue, 2005-09-20 12:02
#2
IE strikes again with 2px of vengance
having a quick look at your site I'm taking a wild guess that you developed it for IE and then took a look in FF???
tbh you really need to develop for FF and then work out the bugs in IE. often things "work" in IE because IE does not work properly. therefore your code is at fault not FF.
I think if you clear your footer it'll go below the main content. but like I said most of your problems are down to IE.
larmyia
Tue, 2005-09-20 16:34
#3
IE strikes again with 2px of vengance
Thanks for the help guys. Interestingly enough I always develop for FF and then check IE when I'm done. The site was nearly unreadable in IE so I went on with the fixing. . . Once it was fixed for IE, well, you can see what it looks like now. I'll make those changes and see what comes up.
Could someone please explain this:
- assign an overflow value (auto or hidden) to #myContainer or apply the clearfix.
Tue, 2005-09-20 18:29
#4
IE strikes again with 2px of vengance
See http://www.w3.org/TR/CSS21/visudet.html#q22 and the following section. When overflow is other than the default 'visible', the element's auto height will will enclose its child floats. This also true of an element of {display: table;}. The latter is not grokked by IE, but its buggy behavior is to enclose its floats if the the element has 'layout', eg has width or height.
The clearfix method adds an explicit clear property just prior to the element end.
cheers,
gary
Tue, 2005-09-20 20:29
#5
IE strikes again with 2px of vengance
Is it just me, or is it really silly that there isn't an easy way to order floats? It just doesn't make any sense to me that you have to go through all this trouble just to have a two column layout when something as simple as ordered floats would make everyones life a lot easier.
i.e.
.style1 {
float-position: 1;
width: 250px;
border: 1px solid #000000;
}
.style2 {
float-position: 2;
width: 250px;
border: 1px solid #000000;
}
.style3 {
float-position: 2;
width: 250px;
border: 1px solid #000000;
}
<div class="style1">left</div> <div class="style2">middle</div> <div class="style3">right</div>
That just seems to make sense to me. A lot more sense than having to use this method: http://glish.com/css/7.asp
Tue, 2005-09-20 22:28
#6
IE strikes again with 2px of vengance
Using floats to create columns is similar to the use of tables for layout. They both push the intent of the element or property. In both cases, they're a work-around 'til something more appropriate comes along. Table layouts have been supplanted by css. The float column is a work-around for the majority PoS browser that doesn't support css2, a nearly 7yo standard. On the bright side, I don't think nearly as many of us would have nearly as good an understanding of floats otherwise.
Consider this banner+3-col+footer example;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en"
xmlns="http://www.w3.org/1999/xhtml"
lang="en">
<head>
<meta name="generator"
content="
HTML Tidy for Linux/x86 (vers 12 April 2005), see www.w3.org" />
<meta name="editor"
content="Emacs 21" />
<meta name="author"
content="Gary Turner" />
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<title>Three Columns for Modern Browsers</title>
<style type="text/css">
/*<![CDATA[*/
html, body {
margin: 0;
padding: 0;
}
body {
background-color: #888;
color: black;
}
p {
font-size: 1em;
margin: 1em 10px;
}
h1, h2, h3 {
text-align: center;
}
#wrapper {
width: 90%;
margin: 1em auto;
max-width: 60em;
border: 1px solid black;
background-color: #88f;
}
#main { opacity: .8;
display: table;
margin: 0 10px;
border: 1px solid black;
border-spacing: 10px;
background-color: #8f8;
}
#col1, #col2, #col3 {
display: table-cell;
border: 1px solid black;
}
#col1 {
width: 20%;
background-color: #8ff;
}
#col2 {
background-color: #f88;
}
#col3 {
width: 20%;
background-color: #f8f;
}
.box {
margin: 1em 10px;
border: 1px solid black;
background-color: #fff;
-moz-border-radius: 10px;
}
/*]]>*/
</style>
</head>
<body>
<div id="wrapper">
<h1>Generic Banner Logo</h1>
<div id="main">
<div id="col1">
<h2>Menu</h2>
<ul>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</div><!-- end col1 -->
<div id="col2">
<h2>Main Content</h2>
<h3>Part 1</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Mauris accumsan, magna vel feugiat rhoncus, ligula pede
pulvinar urna, eu fermentum nunc magna sed purus. Maecenas nec
sapien. Etiam a diam. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas.</p>
<h3>Part 2</h3>
<p>In sit amet ante in pede consectetuer congue. Maecenas quam.
Nam ac velit. Vivamus lorem orci, convallis sit amet, porta
sed, cursus in, tortor. Nulla facilisi. Maecenas malesuada,
sapien eu vehicula ultrices, nisl dolor sagittis orci, in
varius nulla libero at magna. Fusce a sapien at pede nonummy
scelerisque. Suspendisse wisi pede, bibendum quis, adipiscing
quis, sollicitudin non, eros.</p>
</div><!-- end col2 -->
<div id="col3">
<h2>News items</h2>
<div class="box">
<p>some bit of gossip</p>
</div>
</div><!-- end col3 -->
</div><!-- end main -->
<p>©2005</p>
</div><!-- end wrapper -->
</body>
</html>It works just fine in modern browsers. IE is not a modern browser, so we work around it.
cheers,
gary
Tue, 2005-09-20 22:41
#7
IE strikes again with 2px of vengance
Greg-J.com wrote:
A lot more sense than having to use this method: http://glish.com/css/7.asp
This is a much better example of source-ordered columns.
Tue, 2005-09-20 22:44
#8
IE strikes again with 2px of vengance
You guys have been very helpful. Thank you. I have a much better understanding of floats now.
Wed, 2005-09-21 05:21
#9
IE strikes again with 2px of vengance
IE is back at it again. Here is my problem:
As you can see, IE adds an extra 2px of padding to the bottom of myRightImage. I've added background color to make it easier to see. Yet FF and Opera display it correctly. Imagine that.
Any ideas?
Wed, 2005-09-21 05:53
#10
IE strikes again with 2px of vengance
IE preserves a linebox for any block element. That means the image, which defaults to a baseline vertical alignment, will have enough space under it for letter descenders; your 2 px.
Either do img {vertical-align: bottom;} or img {display: block;}.
cheers,
gary
Wed, 2005-09-21 06:01
#11
IE strikes again with 2px of vengance
It's nice when you get the fix. But it's great when you get an explanation. I only hope I can give back when I get good enough to do so.
Cheers!
Wed, 2005-09-21 06:06
#12
IE strikes again with 2px of vengance
Greg, it's best if you don't edit out your problems as others may read this thread in the future and not be able to benefit fully from the explanation given.
Wed, 2005-09-21 19:06
#13
IE strikes again with 2px of vengance
Good call. I've given it a permanent home. Hope this helps someone.
Thu, 2005-09-22 23:12
#14
IE strikes again with 2px of vengance
Same site, new issue. And since I can explain it just as well as showing it, I'd rather not spam the project I'm working on.
I'm trying to create a div that is only 10px (5px on either side) wider than the image contained within it with a min-width of 670px. It seems no matter what I do, the div always stretches the entire width of the page.
#container {
width: auto;
margin: 5px auto 0px auto;;
padding: 5px;
border: 1px solid #9d9d9d;
-moz-border-radius: 8px;
}
<div id="container">
{% some information here, possibly in its own div &}
<img />
{% some information here, possibly an advertisement %}
</div>
As I'm sure you can tell, the div stretches the entire width of the page. The width of the content above the image and below the image will always be 728px wide, and will need to be centered. I've searched, but as many of you know - wording these things can be tricky. As does finding a similar answer.
Thu, 2005-09-22 23:55
#15
IE strikes again with 2px of vengance
Is the image the only thing in the container? If so, you can apply your styling (border, background colour, padding etc.) directly to the image and then you won't have to specify a width in your CSS as it'll take it from the dimensions in the HTML.
Thu, 2005-09-22 23:58
#16
IE strikes again with 2px of vengance
That's what I was originally doing, but I've decided that above and below the image I also want to include a description of the image and an advertisment. I've looked into using javascript getimagewidth()--getelementwidth() and setting the div width with that method, but I was hoping there was a cleaner approach to accomplishing it.
Fri, 2005-09-23 00:29
#17
IE strikes again with 2px of vengance
I think some scripting might be your only option then.
Fri, 2005-09-23 10:08
#18
IE strikes again with 2px of vengance
Just to clarify your requirements.
You have a div (lets call it #box),
- #box will contain an image and may possibly contain some other content above and below the image.
- #box has a min-width of 670px.
- #box should be 10px wider than the image
- you don't know the width of the image
- #box needs to be centred within its container
- the image should be centred within #box.
I think your best bet is to determine the size of the image in your page generating script and to set the width of the #box as an inline style.