Welcome to WebmasterWorld Guest from 188.8.131.52
Forum Moderators: not2easy
The reason I ask, is because I really am not keen on using the various hacks in place for Internet Explorer 5.5 to resolve the padding/margin issues.
There's the box model hack and the browser detection method. My concern, mainly with the box model hack, is what issues this may cause at a later date - perhaps when ie7 is released?
It seems to me that a simple DIV spacer can be used in a few areas to resolve the issue of margins.
These, of course, would only be used in the main structural layout of the page, for instance:-
col1 ¦ col2 ¦ spacer ¦ col3
In the past, I've got around the internet explorer padding/margin issue by never including padding or margin in the structural layout and padding the elements which reside in them, for instance, putting left padding on paragraph tags.
So, in closing, what arguments against this simple method (used sparingly) and what arguments for it?
Conditionals result in a large amount of extra code and further maintenance.
So, we could have <div class="spacer"> </div> and the relevant class info, at perhaps 100 characters, or end up doing browser detection and swapping out style sheets, resulting in 20 times the code and more maintenance issues?
My concern is really about standards and accessibility.
It's not like I'm going to have 50 of these in a page, at most, it would be 3 of them.
I find it a far more elegant solution than a box model hack and far more efficient than writing a whole bunch of detection code, just to change the width of a DIV for a browser version!
I'm not really so sure about that.
If your concern is standards and accessibility, why on earth are you talking about adding extra redundent markup?
conditionals do not add a lot of extra code - one style sheet reference wrapped in a comment, and then a couple of rules in the stylesheet.
to be honest, from what youve said your tryin to achieve, you dont need any extra rules for IE anyway.
My goal, however, is to use just ONE set of styles for all browsers. I currently test for mozilla, safari, ie5.5 and ie6 and dislike the concept of swapping out style sheet entries based on a single browser.
It's a tradeoff I suppose - adding a tiny amount of redundant code to save complicating issues - because, lets face it, if you swap out a stylesheet using browser detection, your creating code which is redundant to any browser other than the one your detecting.
In terms of accessibility, I suppose I would need to investigate how screen readers interpret an empty DIV tag ;)
My real question was more related to whether anyone has any good information on whether having empty DIV tags in code would have any implications in terms of accessibility - for instance, screen readers.
You see, I like to view problems from all different sides. The idea of using a "hack" to "fool" internet explorer 5.5 into reading in different pixel values doesn't appeal to me - "hacks" have a habit of breaking.
For instance, ie7 comes along and handles the box model hack entirely differently.
Browser detection is all well and good, however, it seems to be overkill for the purposes of providing alternative CSS styles.
No problemn for accessibility , screen readers will ignore them.
Ive have never suggested using the box model hack - i agree its not future proof. However, conditional comments, whilst not ideal, are not going to break.
I'm trying to approach it from another angle these days, attempting (and so far succeeding) to keep a single set of style sheets (for screen) which work in all browsers for maintenance reasons.
In the current layout I'm doing, there is only one DIV spacer required in the entire document, which results in far less overall code.
I agree that overuse of this method is not desirable, as it will result in bulky inelegant code.
Other tricks I've used to overcome this in the past, are right floats, where you would have a 760px layout, a 200px menu and a 560px content area. To get a 10px spacer between the menu and the content, make the content 550px and float it right.
There's just so many methods I guess, the final goal being as little code as possible.
The bottom page, below the thumbnails, requires a subfooter where a top grey border line needs to connect directly to the menu grey border.
Ah well, back to the "float right" concept and ditch the spacer idea for now.
So many ways to do this ...