[WSG] IE Issues (margin/padding)
Hi All, http://rahulgonsalves.com/v2/ I have another version here, with the columns background shown, to help you see how out of alignment it is in IE: http://rahulgonsalves.com/v2/columns.html The page displays as intended in Opera and Firefox 2, but in IE is a *mess*. I don't quite know where to start, I wonder whether anybody has any solutions? Specific problems: 1. Why is the header (Rahul Gonsalves...) so much lower in IE? Fix? 2. The h2s are all out of alignment. Does this have to do with the faulty box-model? 3. Why is the image so far out to the left? Fix? 4. How does one fix the paragraph alignment? Thanks in advance, - Rahul. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] IE Issues (margin/padding)
For your home page, this in base.css:
body { text-align: center; margin: 0 auto; width: 770px;}
seems to be conflicting with what you're trying to do in index.css.
On Fri, 03 Nov 2006 19:59:31 +1000, Rahul Gonsalves
[EMAIL PROTECTED] wrote:
Hi All,
http://rahulgonsalves.com/v2/
I have another version here, with the columns background shown, to help
you see how out of alignment it is in IE:
http://rahulgonsalves.com/v2/columns.html
The page displays as intended in Opera and Firefox 2, but in IE is a
*mess*. I don't quite know where to start, I wonder whether anybody has
any solutions?
Specific problems:
1. Why is the header (Rahul Gonsalves...) so much lower in IE? Fix?
2. The h2s are all out of alignment. Does this have to do with the
faulty box-model?
3. Why is the image so far out to the left? Fix?
4. How does one fix the paragraph alignment?
Thanks in advance,
- Rahul.
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
--
Tyssen Design
www.tyssendesign.com.au
Ph: (07) 3300 3303
Mb: 0405 678 590
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] IE Issues (margin/padding)
John Faulds wrote:
For your home page, this in base.css:
body { text-align: center; margin: 0 auto; width: 770px;}
seems to be conflicting with what you're trying to do in index.css.
Whoops!
Thanks for catching that - I meant to make the pages dependent on
completely separate style sheets. I've updated it to reflect this.
http://rahulgonsalves.com/v2/
Thanks,
- Rahul.
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] IE Issues (margin/padding)
Rahul Gonsalves wrote:
http://rahulgonsalves.com/v2/columns.html
The page displays as intended in Opera and Firefox 2, but in IE is a
*mess*. I don't quite know where to start, I wonder whether anybody
has any solutions?
1. Why is the header (Rahul Gonsalves...) so much lower in IE? Fix?
To fix it, add...
#logo p#access {float: left; width: 100%;}
Note the specificity.
2. The h2s are all out of alignment. Does this have to do with the
faulty box-model?
No, it's the old 'margin-doubling on floats' bug in IE/win.
#content h2 { margin: -.33em 0 0 125px; float: left; width: 125px;
display: inline /* IE-fix */;}
3. Why is the image so far out to the left? Fix?
Working version...
#content img.m { clear: both; margin: 2em 0 0 125px; float: left;}
...and add a clearing below the image...
#content .caption {clear: both;}
4. How does one fix the paragraph alignment?
If I have understood you correctly, then I've already included a fix for
it under problem 2, with a negative margin-top on h2 - making it line up
with the paragraph.
regards
Georg
--
http://www.gunlaug.no
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] IE Issues (margin/padding)
Gunlaug Sørtun wrote:
Rahul Gonsalves wrote:
http://rahulgonsalves.com/v2/index.html
1. Why is the header (Rahul Gonsalves...) so much lower in IE? Fix?
To fix it, add...
#logo p#access {float: left; width: 100%;}
Note the specificity.
2. The h2s are all out of alignment. Does this have to do with the
faulty box-model?
No, it's the old 'margin-doubling on floats' bug in IE/win.
#content h2 { margin: -.33em 0 0 125px; float: left; width: 125px;
display: inline /* IE-fix */;}
3. Why is the image so far out to the left? Fix?
Working version...
#content img.m { clear: both; margin: 2em 0 0 125px; float: left;}
...and add a clearing below the image...
#content .caption {clear: both;}
4. How does one fix the paragraph alignment?
If I have understood you correctly, then I've already included a fix for
it under problem 2, with a negative margin-top on h2 - making it line up
with the paragraph.
regards
Georg
Georg,
I am in awe of your CSS. Four lines, and 100% fixed. I truly appreciate
this.
The only small, niggling thing left is that whenever there is a
paragraph preceded by a h2, it seems to be adjusted, only by a pixel or
two, to the right. Any ideas as to how I could fix this? It's a small
thing, but since the design hangs on a grid, a little misalignment looks
pretty nasty.
Regards,
- Rahul.
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] IE Issues (margin/padding)
Rahul Gonsalves wrote:
http://rahulgonsalves.com/v2/index.html
The only small, niggling thing left is that whenever there is a
paragraph preceded by a h2, it seems to be adjusted, only by a pixel
or two, to the right. Any ideas as to how I could fix this? It's a
small thing, but since the design hangs on a grid, a little
misalignment looks pretty nasty.
I agree... :-) ...and I should have fixed it the first time around
without mentioning it. Now I have to add a longish explanation.
It's 3px offset in IE6 (and older), and that's why it's called the '3px
jog' bug.
The most stable fix is to remove the floating h2 at the left of the
paragraph, so IE/win doesn't add interaction between those two elements
into its buggy calculations.
No interaction = no '3px jog' bug.
Removing a float can be done by pulling in one or both of its backside
margins, so the float no longer takes up space in front of another element.
Method described here...
http://www.gunlaug.no/contents/wd_demo_float_03.html
...but since other elements should still interact with the headline in
your page, a smaller and more precise negative backside margin value is
necessary. The idea is to partly remove the float from the flow.
A working fix is to put a suitable negative margin-bottom on the
floating headline to...
#content h2 { margin: -.33em 0 -1.1em 125px;}
...and the headline is partly gone and does no longer take up space in
front of the paragraph. It's still perfectly aligned and visible though.
There's no need to hack in this IE-fix, since it's perfectly valid and
all browsers will handle negative backside margins the same way - giving
you a cross-browser reliable line-up.
You may however want to add a bit more 'margin-top' on elements
following directly below such a partly removed float, as they will end
up 1.1em higher than before.
Hope the above makes sense.
(I wonder if this qualifies as a rotten fix using standards, and if
so if it makes me a rotten standardista (or something) :-P )
regards
Georg
--
http://www.gunlaug.no
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
