OK, I've been working on a layout recently and I've got it to work in all of these browsers:
IE 6, Moz 1.4 1.5, Moz FB/FF 0.6 0.8, NN 6.22 7.10, Opera 5.02 6.00 7.11 7.23
Well I think I've done well to get to that stage. However IE 5.0 & 5.5 make it look terrible (5.0 moreso). For some reason all of my h2's in the side-bars have been shifted right 16px.
The side-bars are actually two unordered lists, and if I replace these with div tags the headers snap back into place. IE 5.0 has a few more glitches other than this but I don't know how to fix those.
Now, you may be asking, "why don't you just use div tags rather than lists?" Well, I want to use markup that describes the content as well as possible when styles are disabled, this means that I'm trying to cut down on the number of meaningless tags, such as div and span.
So if anyone can offer a solution to get this layout to look reasonably decent in IE 5.0 & 5.5 then please let me know.
The layout is here (<!-- m --><a class="postlink" href="http://www11.brinkster.com/hackus/new_design/new.html">http://www11.brinkster.com/hackus/new_design/new.html</a><!-- m -->). If you don't have IE 5.0 or 5.5 then you can get stand-alone versions from here (<!-- m --><a class="postlink" href="http://www.skyzyx.com/Download">http://www.skyzyx.com/Download</a><!-- m --> s/). If nothing else then at least you have a couple more browsers to test in.working on your IE 5/5.5 problem now, but I just thought I'd ask... have you looked at your site in an Images off/CSS on senario? there are some issues...Force IE6 into quirks mode and make IE5-6 render the same through CSS hacks until such time as the web business community no longer cares about IE5,5.5. But that's just me...Originally posted by samij586
have you looked at your site in an Images off/CSS on senario?That thought hadn't even crossed my mind, should be fixed now though. Change a few images here, recode a lot off CSS there and Bob's your uncle, Fanny's your aunt we have a winner!
While I was making the page work for browsers with images disabled it seems that I inadvertantly solved one of the problems for IE 5. The h2's now fall into line, weird. The text is still pushed over towards the right hand side though.
IE is already in quirks mode because I have used the XML decleration, (even when I take it out the page renders exactly the same).
So what hacks do I use then? I have never used a CSS hack in my life, I was hoping never to have to since so far I have always been able to find a way around the problem.
To be honest I don't know if I could get this page to render correctly even if I was just coding for IE 5.It's breaking in MacSafari in the same place it's breaking in PCIE5. My IE5.5 isn't breaking, that I see. My first guess, real quick, would be to see if your h2 "main" section has margins after the div id=t area, the ones with 3 divs either has margin bottom, or the Ps after it has a margin top and bottom.you didn't try it in opera 7.5? it's the most up to dateOriginally posted by TimeBandit
My first guess, real quick, would be to see if your h2 "main" section has margins after the div id=t area, the ones with 3 divs either has margin bottom, or the Ps after it has a margin top and bottom.You gave me an idea, I whacked this into the styles for id="t" and id="b":
font:1px/1px sans-serif;
Then I took the padding down a notch on each of them, then the elements shrunk to their correct sizes, wonderful.
Originally posted by TimeBandit
It's breaking in MacSafari in the same place it's breaking in PCIE5. My IE5.5 isn't breaking, that I see.Alas I cannot test in any Mac browsers but in IE 5 & 5.5 the text (and the green boxes) in the side-bar headers is shifted to the right, I don't know why this is so this remains a puzzling problem to sort out.
IE 5.0 also had another problem, the li's in the list were about 2 miles apart. Luckily I realised that the same sort of idea could be applied to them as I had applied to the layout breaking up. I added some font stylings and much to my surprise the gaps disappeared.
Originally posted by IncaWarrior
you didn't try it in opera 7.5? it's the most up to dateYou don't think that it's enough to have two of the same version 7 browser? That's why I don't have Moz 1.6 and when I got a new HDD I didn't bother to install Firefox 0.7 since I have 0.6 and 0.8.Originally posted by lavalamp
Alas I cannot test in any Mac browsers but in IE 5 & 5.5 the text (and the green boxes) in the side-bar headers is shifted...
IE 5.0 also had another problem, the li's in the list were about 2 miles apart. ...I added some font stylings and much to my surprise the gaps disappeared.
I don't have access to PCs when I am home so I can't check for you right now. I do see that in MacSaf the links have space between them... i don't see this same space in MacIE5. But in MacIE5 your left and right sidebars have overlapping text - the text in the boxes is all overlapped onto ONE LINE! Weird, but it makes the content unreadable.
That's why I always start my stylesheet setting margins and paddings to 0px. I do not use shortcuts to do this aside from adding x=commas after elements, but margin+padding is written verbosely. I have spent too many hours trying to figure out silly littel spacing issues only to discover it's some default browser setting i don't have a declaration for. It has made my CSS life much simpler.
As far as your LI space issue, without actually Download ing anything, I'd suggest making sure the LI margin and padding is zero, or that the line-height is set how you want it. Sometimes you don't really even want to define stuff, but if you don't, some browser will F it up.Originally posted by TimeBandit
But in MacIE5 your left and right sidebars have overlapping text - the text in the boxes is all overlapped onto ONE LINE! Weird, but it makes the content unreadable.:S I can't fix it if I can't test it, I guess that it will just have to stay that way.
Originally posted by TimeBandit
That's why I always start my stylesheet setting margins and paddings to 0px.Me too.
Originally posted by TimeBandit
As far as your LI space issue, without actually Download ing anything, I'd suggest making sure the LI margin and padding is zero, or that the line-height is set how you want it.All 0.
I think I'm just gonna have to leave this layout as it is. I don't think I'm gonna be able to come up with a solution.
Well thanks for sticking with me on this one, if you have a brainstorm and find a way to fix it then please let me know.
Fixing the URLs on the right in MacSaf required this in CSS:
ul.url li {
padding-bottom: 0px;
}
ul.url li.last-li {
padding-bottom: 7px;
}
and this in HTML (i took stuff out of A tag to shorten this post):
<ul class="url">
<li><a>www.hackthissite.org</a></li>
<li><a>www.hackersunited.com</a></li>
<li><a>www.defcon.org</a></li>
<li><a>www.happyhacker.org</a></li>
<li class="last-li"><a>www.google.com</a></li>
</ul>
This next chunk's line-height in the font declaration is making IE5Mac go crazy-nuts, putting text overtop inside each box so u can't read it:
ul li ul li{
margin:0;
border:0;
padding:3px 9px 7px 9px;
font:normal 0.1em/1em "verdana", sans-serif;
background:#fff url(images/subseclr.png) repeat-y top left;
}Better? I took out the IE 5.0 fix for the huge gaps by simply removing these styles:
font:normal 0.1em/1em "verdana", sans-serif;
It turns out that IE 5.0 didn't need the line height so I could have left the rest in, I took it out though because it was screwing up all of the Opera browsers.
I put in your fix for the right hand side-bar, I'm not sure why it would work and why it's not messing up all of the other browsers but since it doesn't affect them I'll leave it in.
Does that make it OK for the Mac browsers now?This makes it look right in MacSaf and IE5Mac, didn't check anything else but your 2nd font dec is the same so it should still bef ine in everything u tested it in:
ul li ul li{
margin:0;
border:0;
padding:3px 9px 7px 9px;
font:normal .11em/12.1em "verdana", sans-serif;
/*\*/
font:normal 0.1em/1em "verdana", sans-serif;
/**/
background:#fff url(images/subseclr.png) repeat-y top left;
}Originally posted by lavalamp
Better?
i see your HTML change but no CSS change, so no, it's not better yet.
Originally posted by TimeBandit
i see your HTML change but no CSS change, so no, it's not better yet. What do you mean it's not better? What do you call this:
ul li ul.url li{
padding-bottom:0;
}
ul li ul.url li.last-li {
padding-bottom:7px;
}
With regards to your first post, I removed these styles:
font:normal 0.1em/1em "verdana", sans-serif;
This makes IE 5.0 display a big gap between the links in the side-bar, but it lets all of the Opera browsers display the text correctly. It was a trade off between IE 5.0 and ALL of the Opera browsers, I chose Opera.ok, it looks better now. Looks fine in MacIE5, MacFF, MacSaf, MacN7. Text on MacIE5 is a hair smaller but I think during testing if I made it any bigger at all then it was too big. Oh well.Well it looks as though there is a compramise between all of the browsers. Thanks for the bug fixes.
I'm going to leave it as it is for now incase I upset the balance.
IE 6, Moz 1.4 1.5, Moz FB/FF 0.6 0.8, NN 6.22 7.10, Opera 5.02 6.00 7.11 7.23
Well I think I've done well to get to that stage. However IE 5.0 & 5.5 make it look terrible (5.0 moreso). For some reason all of my h2's in the side-bars have been shifted right 16px.
The side-bars are actually two unordered lists, and if I replace these with div tags the headers snap back into place. IE 5.0 has a few more glitches other than this but I don't know how to fix those.
Now, you may be asking, "why don't you just use div tags rather than lists?" Well, I want to use markup that describes the content as well as possible when styles are disabled, this means that I'm trying to cut down on the number of meaningless tags, such as div and span.
So if anyone can offer a solution to get this layout to look reasonably decent in IE 5.0 & 5.5 then please let me know.
The layout is here (<!-- m --><a class="postlink" href="http://www11.brinkster.com/hackus/new_design/new.html">http://www11.brinkster.com/hackus/new_design/new.html</a><!-- m -->). If you don't have IE 5.0 or 5.5 then you can get stand-alone versions from here (<!-- m --><a class="postlink" href="http://www.skyzyx.com/Download">http://www.skyzyx.com/Download</a><!-- m --> s/). If nothing else then at least you have a couple more browsers to test in.working on your IE 5/5.5 problem now, but I just thought I'd ask... have you looked at your site in an Images off/CSS on senario? there are some issues...Force IE6 into quirks mode and make IE5-6 render the same through CSS hacks until such time as the web business community no longer cares about IE5,5.5. But that's just me...Originally posted by samij586
have you looked at your site in an Images off/CSS on senario?That thought hadn't even crossed my mind, should be fixed now though. Change a few images here, recode a lot off CSS there and Bob's your uncle, Fanny's your aunt we have a winner!
While I was making the page work for browsers with images disabled it seems that I inadvertantly solved one of the problems for IE 5. The h2's now fall into line, weird. The text is still pushed over towards the right hand side though.
IE is already in quirks mode because I have used the XML decleration, (even when I take it out the page renders exactly the same).
So what hacks do I use then? I have never used a CSS hack in my life, I was hoping never to have to since so far I have always been able to find a way around the problem.
To be honest I don't know if I could get this page to render correctly even if I was just coding for IE 5.It's breaking in MacSafari in the same place it's breaking in PCIE5. My IE5.5 isn't breaking, that I see. My first guess, real quick, would be to see if your h2 "main" section has margins after the div id=t area, the ones with 3 divs either has margin bottom, or the Ps after it has a margin top and bottom.you didn't try it in opera 7.5? it's the most up to dateOriginally posted by TimeBandit
My first guess, real quick, would be to see if your h2 "main" section has margins after the div id=t area, the ones with 3 divs either has margin bottom, or the Ps after it has a margin top and bottom.You gave me an idea, I whacked this into the styles for id="t" and id="b":
font:1px/1px sans-serif;
Then I took the padding down a notch on each of them, then the elements shrunk to their correct sizes, wonderful.
Originally posted by TimeBandit
It's breaking in MacSafari in the same place it's breaking in PCIE5. My IE5.5 isn't breaking, that I see.Alas I cannot test in any Mac browsers but in IE 5 & 5.5 the text (and the green boxes) in the side-bar headers is shifted to the right, I don't know why this is so this remains a puzzling problem to sort out.
IE 5.0 also had another problem, the li's in the list were about 2 miles apart. Luckily I realised that the same sort of idea could be applied to them as I had applied to the layout breaking up. I added some font stylings and much to my surprise the gaps disappeared.
Originally posted by IncaWarrior
you didn't try it in opera 7.5? it's the most up to dateYou don't think that it's enough to have two of the same version 7 browser? That's why I don't have Moz 1.6 and when I got a new HDD I didn't bother to install Firefox 0.7 since I have 0.6 and 0.8.Originally posted by lavalamp
Alas I cannot test in any Mac browsers but in IE 5 & 5.5 the text (and the green boxes) in the side-bar headers is shifted...
IE 5.0 also had another problem, the li's in the list were about 2 miles apart. ...I added some font stylings and much to my surprise the gaps disappeared.
I don't have access to PCs when I am home so I can't check for you right now. I do see that in MacSaf the links have space between them... i don't see this same space in MacIE5. But in MacIE5 your left and right sidebars have overlapping text - the text in the boxes is all overlapped onto ONE LINE! Weird, but it makes the content unreadable.
That's why I always start my stylesheet setting margins and paddings to 0px. I do not use shortcuts to do this aside from adding x=commas after elements, but margin+padding is written verbosely. I have spent too many hours trying to figure out silly littel spacing issues only to discover it's some default browser setting i don't have a declaration for. It has made my CSS life much simpler.
As far as your LI space issue, without actually Download ing anything, I'd suggest making sure the LI margin and padding is zero, or that the line-height is set how you want it. Sometimes you don't really even want to define stuff, but if you don't, some browser will F it up.Originally posted by TimeBandit
But in MacIE5 your left and right sidebars have overlapping text - the text in the boxes is all overlapped onto ONE LINE! Weird, but it makes the content unreadable.:S I can't fix it if I can't test it, I guess that it will just have to stay that way.
Originally posted by TimeBandit
That's why I always start my stylesheet setting margins and paddings to 0px.Me too.
Originally posted by TimeBandit
As far as your LI space issue, without actually Download ing anything, I'd suggest making sure the LI margin and padding is zero, or that the line-height is set how you want it.All 0.
I think I'm just gonna have to leave this layout as it is. I don't think I'm gonna be able to come up with a solution.
Well thanks for sticking with me on this one, if you have a brainstorm and find a way to fix it then please let me know.
Fixing the URLs on the right in MacSaf required this in CSS:ul.url li {
padding-bottom: 0px;
}
ul.url li.last-li {
padding-bottom: 7px;
}
and this in HTML (i took stuff out of A tag to shorten this post):
<ul class="url">
<li><a>www.hackthissite.org</a></li>
<li><a>www.hackersunited.com</a></li>
<li><a>www.defcon.org</a></li>
<li><a>www.happyhacker.org</a></li>
<li class="last-li"><a>www.google.com</a></li>
</ul>
This next chunk's line-height in the font declaration is making IE5Mac go crazy-nuts, putting text overtop inside each box so u can't read it:
ul li ul li{
margin:0;
border:0;
padding:3px 9px 7px 9px;
font:normal 0.1em/1em "verdana", sans-serif;
background:#fff url(images/subseclr.png) repeat-y top left;
}Better? I took out the IE 5.0 fix for the huge gaps by simply removing these styles:
font:normal 0.1em/1em "verdana", sans-serif;
It turns out that IE 5.0 didn't need the line height so I could have left the rest in, I took it out though because it was screwing up all of the Opera browsers.
I put in your fix for the right hand side-bar, I'm not sure why it would work and why it's not messing up all of the other browsers but since it doesn't affect them I'll leave it in.
Does that make it OK for the Mac browsers now?This makes it look right in MacSaf and IE5Mac, didn't check anything else but your 2nd font dec is the same so it should still bef ine in everything u tested it in:
ul li ul li{
margin:0;
border:0;
padding:3px 9px 7px 9px;
font:normal .11em/12.1em "verdana", sans-serif;
/*\*/
font:normal 0.1em/1em "verdana", sans-serif;
/**/
background:#fff url(images/subseclr.png) repeat-y top left;
}Originally posted by lavalamp
Better?
i see your HTML change but no CSS change, so no, it's not better yet.
Originally posted by TimeBandit i see your HTML change but no CSS change, so no, it's not better yet.
What do you mean it's not better? What do you call this:ul li ul.url li{
padding-bottom:0;
}
ul li ul.url li.last-li {
padding-bottom:7px;
}
With regards to your first post, I removed these styles:
font:normal 0.1em/1em "verdana", sans-serif;
This makes IE 5.0 display a big gap between the links in the side-bar, but it lets all of the Opera browsers display the text correctly. It was a trade off between IE 5.0 and ALL of the Opera browsers, I chose Opera.
ok, it looks better now. Looks fine in MacIE5, MacFF, MacSaf, MacN7. Text on MacIE5 is a hair smaller but I think during testing if I made it any bigger at all then it was too big. Oh well.Well it looks as though there is a compramise between all of the browsers. Thanks for the bug fixes.I'm going to leave it as it is for now incase I upset the balance.