|
Hi Ryan
Thanks for the reply.
As for the menu
#mainnav ul li #services{
background-image: url(../../images/global/mainnav/services.gif);
background-repeat: no-repeat;
height: 113px;
width: 82px;
background-position: left top;
display: block;
padding-right: 10px;} I haven't seen any problems from my side in IE. You mentioned using voice family. What is that? Dumb question I know but I have no idea what it is. IE has that padding problem only for the 1st div in the main container right?
For #contentwrapper and #contentcontainer, I used 2 instead of one because I needed the background image to synchronise. Didn't even know I got around not using hack by doing this. I am very new to all these so I am doing it through trial and error. How would you do it? Needed 3 background images due to the gradients.
I still haven't find a way to solve these problems: Anyone knows how to?
1) Opera only: The hover at the main navigation on the top of the page is not working.
2) Netscape only: For short page - Netscape refuses to show the background because the sidebar (column 2) is floated to the right and it is longer than the 1st column. It will show the background if the 1st column is longer but that is not what I want. I do not want to be restricted. I want flexibility of text length in either columns.
Best Wishes
Jaime
-------Original Message-------
Date: 02/03/04 21:56:24
Subject: Re: [WSG] Going Mad with pleasing the browsers
That's the thing though - you'll have to use hacks. Now, hacks are commonplace in order to maintain browser compatibility in CSS. We can all entend a big poop-covered handshake over to our Microsoft boys for placing us in this position. Understand that it is the fault of the browsers and not of the language itself that CSS hacks are completely necessary if you are going tableless and have either padding or border properties in your CSS file. Margins don't cause problems.
If you are unfamiliar with the box model, here's a short rundown (aka why you need to use CSS hacks) ... and also, your little "be nice to netscape" rule there is technically a hack as well. cough ;) we'll let that one slide heh heh.
Say you have a div, in your case controlled by #contentwrapper
#contentcontainer {
position: relative;
width: 747px;
background-image: url(../../images/global/backgrounds/contents_tiler.gif);
background-color: #365878;
background-repeat: repeat-y;
background-position: left top;
}#contentwrapper {
font-size: 1em;
text-align: justify;
line-height: 1.8em;
background-image: url(../../images/global/backgrounds/border.gif);
background-repeat: no-repeat;
background-position: right top;
padding-bottom: 1px; /*Fix NS 7 bug where it breaks footer from the contents container */
padding-top: 30px;
rem_padding-left: 20px;
padding-right: 35px;
}
Let's cut out all the other garbage for length's sake and deal with hack-worthy material.
#contentcontainer {
width: 747px;
}
#contentwrapper {
padding-bottom: 1px; /*Fix NS 7 bug where it breaks footer from the contents container */
padding-top: 30px;
rem_padding-left: 20px;
padding-right: 35px;
}
You've chosen a most interesting way to get around not using a hack by placing the box within a box, and then not specifying a width in the inner container. I would opt for a hack here and save some filesize. In addition to hacks for IE, it's common to see them for Opera as well. Opera users though are much more keen to actually updating their software when a new version comes out. Why some people are still using IE5.0 at home is beyond me. Maybe they didn't get the memo.
In other areas, there are some possible problems.
#mainnav ul li #services{
background-image: url(../../images/global/mainnav/services.gif);
background-repeat: no-repeat;
height: 113px;
width: 82px;
background-position: left top;
display: block;
padding-right: 10px;}
Your width will not be 82px there, it will be 92px in IE. (82 + 10). If you had
border: 1px solid #000;
in there as well, it would be 1 + 82 + 10 + 1 or 94 pixels. That's what the screwed up box model handling of IE does, adds width plus border size, plus padding to determine the size of the overall box. You're bound to run into a wall somewhere along the line if you're doing tablefree layouts hackless. I always use the voice-family flavour to spoof the retarded browsers, but there are other methods that work equally as well. I don't particularly like using hacks either, and I see the basis behind this recent tableless layout deal as well - tables are for tabular data, not for web layouts. When the table property was created, layouts were not in the minds of those making it. It's all about meaning. That's why there was the definition wars in here awhile back. What constitutes their correct usage? Text definitions or a broader spectrum? I say broader spectrum within reasonable boundaries.
I wish I could say there will come a day when hacks are but a laughable history. Hopefully I'll live to see it, because after all the malice I have for IE and users with grossly outdated browsers - it'll be nice to laugh it off instead of take an uzi and round up the Microsoft IE development team for payback. There will be more hacks to be learned and used in the future probably, and just like right now, those hacks will be for the 2 percent of the population who don't know what the word upgrade means. How will we get to hackless web bliss?
One Browser to rule them all, One Browser to find them,
One Browser to bring them all and in the Standards bind them.
Just like keeping a secret is easier if you're the only one who knows it, keeping code standard requires one browser with no quirks and perfect handling that everyone uses on their machines. Being as IE is the least compliant and most popular browser, it's damn near impossible to hope for anything close to that right now.
And even with the One Browser, there will still be One Browser 1.0, One Browser 2.0, One Browser 3.0... etc. Do you see the circle we're running around? :)
--Ryan
http://www.theward.net
JW wrote:
|
I'm trying to avoid using hacks if possible.
Now what I need to find out is what are the causes of the problems. Feeling so dazed by all these.
Best Wishes
Jaime |
|
| 
IncrediMail - Email has finally evolved - Click Here