Hello Everyone,
after reading an article (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/slidingdoors/">http://www.alistapart.com/articles/slidingdoors/</a><!-- m -->) about styling lists into navigation tabs, I decided to give it a try. The list code works very well but it seems to have affected the flow of the rest of my page when viewed in IE5 mac.
The page is meant to emulate a three column "table layout" using only css. Each row consists of a div(.row) containing three divs each floated left with a width of 33%. This layout worked fine in IE5 mac until I added the navigation tabs.
The problem:
The first row of images is being floated all the way to the left of the page.
Please help if you can. The page can be viewed here (<!-- m --><a class="postlink" href="http://www.circlesquarexline.com/upcoming/header.php">http://www.circlesquarexline.com/upcoming/header.php</a><!-- m -->)
Thank you,
Mikesorry no idea,
but
THANK YOU VERY MUCH for the tutorial, that looks excelent
Fantatier,
YOU'RE WECLOME VERY MUCH
for the tutorial.
alistapart (<!-- m --><a class="postlink" href="http://www.alistapart.com">http://www.alistapart.com</a><!-- m -->) is a great site with lots of useful information.
If you liked that article, this one is also very good: taming lists (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/taminglists/">http://www.alistapart.com/articles/taminglists/</a><!-- m -->).
Has anyone view the above mentioned "problem" page with IE win?
If so, do is look weird?
Bye for now,
Mikelooks fine in IEwin,
and yea fould loads of great stuff on that site allready thx thx thx IE for Mac has problems with floats.
I have a few sites that have a 3 column (floated) layout.
IE/Mac shows each column, one on top of the other rather than side by side.
I have searched and searched but can't seem to find any fix for this.
I don't know if this helps to calm your nervs but a lot (if not most) Mac users are anti-Microsoft and will be using Safari - which does follow the W3C standards and floats properly.I've already had to deal with exactly this problem on several occasions. First: The reason it doesn't work.
IE5-Mac doesn't size floated elements correctly. Placing a block element inside a floated element with no width specified causes the floated element to take up the maximum space possible. The ALA article linked-to above mentions this. The solution is to float two things:
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">link text</a></li>
</ul>
1) Float the LI tags in the direction you want the tabs to go.
2) Float the A tags in the opposite direction as the LI tags.
3) Too many floats within floats will cause IE5 to mess up regardless.
--- OR ---
Give your LI tags a width and don't float the A tags. This is the most stable way.
IE-Mac 5.0 has bugs in it that are beyond repair. IE-Mac 5.1 can be cured using the float within a float method above. IE-Mac 5.2 reacts the same was as 5.1. Setting the width of the floated element is stable in all versions. And remember, you can always use the IE5-Mac backslash hack to hide CSS style rules from it.
.someClass {
color: green;
/* This comment prevents IE5-Mac from reading all style rules until the next comment \*/
color: blue;
margin: 1em;
/* Since this comment has no backslash, it ends the IE5-Mac backslash hack */
}
EDIT: Also, IE5-Mac incorrectly inherits the "clear" property. Setting clear: both; to some element will cause all of that elements descendants to have clear: both; This is incureable. Clear floats using additional markup.
<style type="text/css" media="screen">
#columns_clearer {
clear: both;
height: 1px;
overflow: hidden;
}
.
.
.
<body>
<div id="wrapper">
<div id="left"></div>
<div id="right"></div>
<div id="columns_clearer"></div>
<div id="footer"></div>
</div>does ANYBODY actualy use IE for mac?Everyone should just try Firefox for a week... then there would be no compatibility problems, since everyone would be using the same (standards-compliant) browser! Yeah, that was random, but worth it
.Originally posted by patenaudemat
Everyone should just try Firefox for a week... then there would be no compatibility problems, since everyone would be using the same (standards-compliant) browser! Yeah, that was random, but worth it.
i think it would be all of our heaven if we would only need to program for one browserOriginally posted by Fantatier
i think it would be all of our heaven if we would only need to program for one browser
Yeah, it would be awesome... of course, then there'd be accusations that there was a monopoly, someone would come along and develop a new browser, and no matter how crappy (or excellent) it was, people would Download it to be "different." It's a vicious cycle, started by MicrosoftOriginally posted by Fantatier
does ANYBODY actualy use IE for mac? yes. My own dear mother is still using OS 9 with IE 5. I've threatened to sneak in an replace her OS with OS X but she'll shoot at me if I touch her computer.Originally posted by Fantatier
i think it would be all of our heaven if we would only need to program for one browser Yeah, and that browser would suck because it has no competition.Thanks to all,
After trouble-shooting this for a while, I decided that I would alter the page layout to satisfy ie5 mac. This is not the most optimal solution, by far, nut alteast the page will be displayed correctly in this browser.
Recap:
I was using one over-all container, div#wrapper, that aligns the page to the center of the viewport. Inside this div, I placed the header, nav tabs and 3 column floated layout. You know the sort of thing anyone would do. IE5 wouldn't display the 3 column floats correctly.
Solution:
My solution was to rename div#wrapper to div#wrapper_top. This div will hold the header and nav tabs. I then created a div (#wrapper_bottom) to contain the 3 column floats.
It seems to me that the floats in the tabs were some how causing the floats in the 3 column layout to go haywire. By splitting them up in this manner, the problem is resolved.
Thanks again for all the help,
Mike
Triumph, I'm from pencil-tucky to
riginally posted by Wart_Hog
Triumph, I'm from pencil-tucky too. Which part? I'm from just north of Pixberg.About 2 hours north of philly. The locals call it the "Poconos", I found it to be a cultural void with no creative influence.Originally posted by Wart_Hog
About 2 hours north of philly. The locals call it the "Poconos", I found it to be a cultural void with no creative influence. I like the area around Tunkhannock and Towanda.rsd,
I've had good luck with the following 3 column layout code on IE mac:
I havent test on IE win yet, but I think it will work there too.
CSS:
#wrapper{
margin: 0 auto 0 auto;
text-align: left;
width: 750px;
background: #fff;
}
/* Thank you to: <!-- m --><a class="postlink" href="http://www.positioniseverything.net/easyclearing.html">http://www.positioniseverything.net/easyclearing.html</a><!-- m --> */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
h3{
margin: 0;
padding: 0;
}
.three_col div{
float: left;
width: 33%;
margin: 0 0 10px 0;
}
HTML:
<body>
<div id="wrapper" class="clearfix">
<div class="three_col">
<div>
<h3>Col. 1</h3>
<span>Enter all "Column 1 data here</span>
</div>
<div>
<h3>Col. 2</h3>
<span>Enter all "Column 2 data here</span>
</div>
<div>
<h3>Col. 3</h3>
<span>Enter all "Column 3 data here</span>
</div>
</div>
</div><!-- Wrapper -->
</body>
after reading an article (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/slidingdoors/">http://www.alistapart.com/articles/slidingdoors/</a><!-- m -->) about styling lists into navigation tabs, I decided to give it a try. The list code works very well but it seems to have affected the flow of the rest of my page when viewed in IE5 mac.
The page is meant to emulate a three column "table layout" using only css. Each row consists of a div(.row) containing three divs each floated left with a width of 33%. This layout worked fine in IE5 mac until I added the navigation tabs.
The problem:
The first row of images is being floated all the way to the left of the page.
Please help if you can. The page can be viewed here (<!-- m --><a class="postlink" href="http://www.circlesquarexline.com/upcoming/header.php">http://www.circlesquarexline.com/upcoming/header.php</a><!-- m -->)
Thank you,
Mikesorry no idea,
but
THANK YOU VERY MUCH for the tutorial, that looks excelent
Fantatier,YOU'RE WECLOME VERY MUCH
for the tutorial.alistapart (<!-- m --><a class="postlink" href="http://www.alistapart.com">http://www.alistapart.com</a><!-- m -->) is a great site with lots of useful information.
If you liked that article, this one is also very good: taming lists (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/taminglists/">http://www.alistapart.com/articles/taminglists/</a><!-- m -->).
Has anyone view the above mentioned "problem" page with IE win?
If so, do is look weird?
Bye for now,
Mikelooks fine in IEwin,
and yea fould loads of great stuff on that site allready
thx thx thx IE for Mac has problems with floats.I have a few sites that have a 3 column (floated) layout.
IE/Mac shows each column, one on top of the other rather than side by side.
I have searched and searched but can't seem to find any fix for this.
I don't know if this helps to calm your nervs but a lot (if not most) Mac users are anti-Microsoft and will be using Safari - which does follow the W3C standards and floats properly.I've already had to deal with exactly this problem on several occasions. First: The reason it doesn't work.
IE5-Mac doesn't size floated elements correctly. Placing a block element inside a floated element with no width specified causes the floated element to take up the maximum space possible. The ALA article linked-to above mentions this. The solution is to float two things:
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">link text</a></li>
</ul>
1) Float the LI tags in the direction you want the tabs to go.
2) Float the A tags in the opposite direction as the LI tags.
3) Too many floats within floats will cause IE5 to mess up regardless.
--- OR ---
Give your LI tags a width and don't float the A tags. This is the most stable way.
IE-Mac 5.0 has bugs in it that are beyond repair. IE-Mac 5.1 can be cured using the float within a float method above. IE-Mac 5.2 reacts the same was as 5.1. Setting the width of the floated element is stable in all versions. And remember, you can always use the IE5-Mac backslash hack to hide CSS style rules from it.
.someClass {
color: green;
/* This comment prevents IE5-Mac from reading all style rules until the next comment \*/
color: blue;
margin: 1em;
/* Since this comment has no backslash, it ends the IE5-Mac backslash hack */
}
EDIT: Also, IE5-Mac incorrectly inherits the "clear" property. Setting clear: both; to some element will cause all of that elements descendants to have clear: both; This is incureable. Clear floats using additional markup.
<style type="text/css" media="screen">
#columns_clearer {
clear: both;
height: 1px;
overflow: hidden;
}
.
.
.
<body>
<div id="wrapper">
<div id="left"></div>
<div id="right"></div>
<div id="columns_clearer"></div>
<div id="footer"></div>
</div>does ANYBODY actualy use IE for mac?Everyone should just try Firefox for a week... then there would be no compatibility problems, since everyone would be using the same (standards-compliant) browser! Yeah, that was random, but worth it
.Originally posted by patenaudemat Everyone should just try Firefox for a week... then there would be no compatibility problems, since everyone would be using the same (standards-compliant) browser! Yeah, that was random, but worth it
. i think it would be all of our heaven if we would only need to program for one browser
Originally posted by Fantatier i think it would be all of our heaven if we would only need to program for one browser
Yeah, it would be awesome... of course, then there'd be accusations that there was a monopoly, someone would come along and develop a new browser, and no matter how crappy (or excellent) it was, people would Download it to be "different." It's a vicious cycle, started by Microsoft
Originally posted by Fantatier does ANYBODY actualy use IE for mac? yes. My own dear mother is still using OS 9 with IE 5. I've threatened to sneak in an replace her OS with OS X but she'll shoot at me if I touch her computer.Originally posted by Fantatier
i think it would be all of our heaven if we would only need to program for one browser
Yeah, and that browser would suck because it has no competition.Thanks to all,After trouble-shooting this for a while, I decided that I would alter the page layout to satisfy ie5 mac. This is not the most optimal solution, by far, nut alteast the page will be displayed correctly in this browser.
Recap:
I was using one over-all container, div#wrapper, that aligns the page to the center of the viewport. Inside this div, I placed the header, nav tabs and 3 column floated layout. You know the sort of thing anyone would do. IE5 wouldn't display the 3 column floats correctly.
Solution:
My solution was to rename div#wrapper to div#wrapper_top. This div will hold the header and nav tabs. I then created a div (#wrapper_bottom) to contain the 3 column floats.
It seems to me that the floats in the tabs were some how causing the floats in the 3 column layout to go haywire. By splitting them up in this manner, the problem is resolved.
Thanks again for all the help,
Mike
Triumph, I'm from pencil-tucky to
riginally posted by Wart_Hog Triumph, I'm from pencil-tucky too. Which part? I'm from just north of Pixberg.
About 2 hours north of philly. The locals call it the "Poconos", I found it to be a cultural void with no creative influence.Originally posted by Wart_Hog About 2 hours north of philly. The locals call it the "Poconos", I found it to be a cultural void with no creative influence. I like the area around Tunkhannock and Towanda.rsd,
I've had good luck with the following 3 column layout code on IE mac:
I havent test on IE win yet, but I think it will work there too.
CSS:
#wrapper{
margin: 0 auto 0 auto;
text-align: left;
width: 750px;
background: #fff;
}
/* Thank you to: <!-- m --><a class="postlink" href="http://www.positioniseverything.net/easyclearing.html">http://www.positioniseverything.net/easyclearing.html</a><!-- m --> */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
h3{
margin: 0;
padding: 0;
}
.three_col div{
float: left;
width: 33%;
margin: 0 0 10px 0;
}
HTML:
<body>
<div id="wrapper" class="clearfix">
<div class="three_col">
<div>
<h3>Col. 1</h3>
<span>Enter all "Column 1 data here</span>
</div>
<div>
<h3>Col. 2</h3>
<span>Enter all "Column 2 data here</span>
</div>
<div>
<h3>Col. 3</h3>
<span>Enter all "Column 3 data here</span>
</div>
</div>
</div><!-- Wrapper -->
</body>