In principle I agree that CSS should be used for layout BUT how do you get it to work across Browsers. I've include a link to a site I'm developing. It looks fine in IE but falls apart in NS7 and Opera. Don't even try in NS4xx
<!-- m --><a class="postlink" href="http://www.fulspec.com/test">http://www.fulspec.com/test</a><!-- m -->
Margins, Padding, and Width work differently in different Browsers and none appear to comply to W3C specs (which are also strange. Why would margin be included in width?)
Enough ranting.
Could a couple of you take a look (CSS is included on the page) and possibly tell me how to fix the layout across current browsers before I revert back to tables.The best idea is to develop using a good browser such as mozilla firebird and then use IE work arounds to make it look the same in IE.Keep in mind that IE *totally* screws up the box model so when you do borders and padding you have to include the box model hacks to feed the correct values to good browsers and the screwy work arounds to IE. If you're unfamiliar with that problem just Google for "box model hack".Thanks for the response.
That's kind of what I thought. I'll take a look at "box model hack" but I think I already know what it's going to say.It's better not to use the box model hacks - at some point when browsers move on it'll probably screw up your page again. My technique is nested divs.
<div id="leftcol">
<div>
Content in here
</div>
</div>
Then you apply your css like this:
<style type="text/css"><!--
#leftcol {
width: 200px;
}
#leftcol div {
padding: 20px;
}
--></style>
Basically splitting the padding and widths avoids the box model problems, and the inner div assumes the width you have given the outer one.For the past couple months I've switched to this process --> I build in DreamWeaver using Safari to check progress, then hack for IE on PC, hack for IE5Mac. This gets the page very close to where it needs to be.
I didn't have much luck with the voice-family hack but I had just started learning it when I gave up on it. Here are the browser hacks that I use most often now:
/* BROWSER HACKS */
/* browsers all see element below */
#element2 {
}
/* ie on PC does not listen to element below */
html>body #element2 {
}
/* begin ie5 mac hack */
#element {
}
/* begin hide from ie5 mac \*/
#element {
}
/* end hide from ie5 mac */
/* end ie5 mac hack */
It is true however that this doesn't address what will happen if, for instance, the next verison of IE gets the box model wrong and also does not fall for the hacks... *gulp*Busy, busy, no time to reply
DaveSW:
I liked your idea and will expore further.
Timebandit:
One thing I hate doing is createing special bits of code for each browser type. And worse, having to fix it when things change. I look for a 'single' solution that will accomodate all (well maybe not all) current browsers, even if the code is not totally spec compliant.
Soooo, sometime I use TABLES for layoutOriginally posted by nedals
I look for a 'single' solution that will accomodate all (well maybe not all) current browsers, even if the code is not totally spec compliant.
Soooo, sometime I use TABLES for layout
EXCELLENT! If it fits your specs than let it flow, let it flow. I am doing my best to move away from them where I can, however, I am currently involved in a web site for a local K-3 school 9in my free time). They have very old machines and browsers still in use there so I have to make a site that works well in that setting. TABLEs to the rescue!I go a long way to avoid hacks. The only hack I value and use regularly is the @import one. And I'm not sure if that is a hack or plain common sense.
<!-- m --><a class="postlink" href="http://www.fulspec.com/test">http://www.fulspec.com/test</a><!-- m -->
Margins, Padding, and Width work differently in different Browsers and none appear to comply to W3C specs (which are also strange. Why would margin be included in width?)
Enough ranting.
Could a couple of you take a look (CSS is included on the page) and possibly tell me how to fix the layout across current browsers before I revert back to tables.The best idea is to develop using a good browser such as mozilla firebird and then use IE work arounds to make it look the same in IE.Keep in mind that IE *totally* screws up the box model so when you do borders and padding you have to include the box model hacks to feed the correct values to good browsers and the screwy work arounds to IE. If you're unfamiliar with that problem just Google for "box model hack".Thanks for the response.
That's kind of what I thought. I'll take a look at "box model hack" but I think I already know what it's going to say.It's better not to use the box model hacks - at some point when browsers move on it'll probably screw up your page again. My technique is nested divs.
<div id="leftcol">
<div>
Content in here
</div>
</div>
Then you apply your css like this:
<style type="text/css"><!--
#leftcol {
width: 200px;
}
#leftcol div {
padding: 20px;
}
--></style>
Basically splitting the padding and widths avoids the box model problems, and the inner div assumes the width you have given the outer one.For the past couple months I've switched to this process --> I build in DreamWeaver using Safari to check progress, then hack for IE on PC, hack for IE5Mac. This gets the page very close to where it needs to be.
I didn't have much luck with the voice-family hack but I had just started learning it when I gave up on it. Here are the browser hacks that I use most often now:
/* BROWSER HACKS */
/* browsers all see element below */
#element2 {
}
/* ie on PC does not listen to element below */
html>body #element2 {
}
/* begin ie5 mac hack */
#element {
}
/* begin hide from ie5 mac \*/
#element {
}
/* end hide from ie5 mac */
/* end ie5 mac hack */
It is true however that this doesn't address what will happen if, for instance, the next verison of IE gets the box model wrong and also does not fall for the hacks... *gulp*Busy, busy, no time to reply
DaveSW:
I liked your idea and will expore further.
Timebandit:
One thing I hate doing is createing special bits of code for each browser type. And worse, having to fix it when things change. I look for a 'single' solution that will accomodate all (well maybe not all) current browsers, even if the code is not totally spec compliant.
Soooo, sometime I use TABLES for layout
Originally posted by nedals I look for a 'single' solution that will accomodate all (well maybe not all) current browsers, even if the code is not totally spec compliant.
Soooo, sometime I use TABLES for layout
EXCELLENT! If it fits your specs than let it flow, let it flow. I am doing my best to move away from them where I can, however, I am currently involved in a web site for a local K-3 school 9in my free time). They have very old machines and browsers still in use there so I have to make a site that works well in that setting. TABLEs to the rescue!I go a long way to avoid hacks. The only hack I value and use regularly is the @import one. And I'm not sure if that is a hack or plain common sense.