PDA

View Full Version : Troubleshooting cross-version layout issues: IE8->IE7



ptrcao
Jan 18th, 2011, 02:27 PM
http://www.mathannotated.com/page.html?topic=probability-1&&subtopic=simple-or-elementary-events

I've already applied a metatag to the head that forces IE to go into version 7 mode, so you don't necessarily need to view it in IE7; view it in IE8 and the browser will behave as if it is IE7.

Now view in FF for comparison. See the difference?

Can someone help me identify what the problem is with my CSS or otherwise, resulting in the div being squashed widthwise in IE7? How to fix it so it appears as in FF? My thanks in advance.

abduraooft
Jan 18th, 2011, 02:35 PM
Set clear:right; to .content

ptrcao
Jan 18th, 2011, 02:49 PM
Set clear:right; to .content

Worked - except a small problem; a gap has appeared in between my tabs and the content box.

http://www.mathannotated.com/page.html?topic=probability-1&&subtopic=simple-or-elementary-events

You know how to fix this?

abduraooft
Jan 18th, 2011, 03:32 PM
Add
*{
margin:0;
padding:0;
} into your CSS to remove all default values of margins and padding from all elements.

ptrcao
Jan 18th, 2011, 03:54 PM
Add
*{
margin:0;
padding:0;
} into your CSS to remove all default values of margins and padding from all elements.

You're on the right track but applying this universally will cause more problems then it will solve; I need to narrow down to the exact elements responsible for the gap between tab and div and apply it to them specifically. I thought applying it to the two eleemnts concerned ul.menu and div.content would be the way to go, but this achieves nothing. I can't seem to pinpoint the source of the problem at this stage. Still open to further suggestions.

abduraooft
Jan 18th, 2011, 04:08 PM
#centralcolumn2 div form{
margin:0;
padding:0;
}

You're on the right track but applying this universally will cause more problems then it will solve; It's a good practice to "begin with" a universal reset, when you are aiming cross browser support!

ptrcao
Jan 18th, 2011, 04:14 PM
It's a good practice to "begin with" a universal reset, when you are aiming cross browser support!

If only someone had told me before, I would have started out designing with a universal reset applied from day one. I fear I've come too far now... :(

I really don't understand what it is that is causing that disjunction. Based on the results with the universal result, it must be padding/margin from some element that is contributing to it, but I've tried all the obvious ones...

ptrcao
Jan 18th, 2011, 06:47 PM
#centralcolumn2 div form{
margin:0;
padding:0;
}
It's a good practice to "begin with" a universal reset, when you are aiming cross browser support!

just thought u might be interested in the solution i settled for
set the div height to 1em
it was google's poorly designed search bar that was the culprit
i don't know what it is abduraooft, but i suspected originally that it related to the classic IE7 problem of an image not sitting on the bottom line:


http://stackoverflow.com/questions/1207541/strange-gap-between-div-elements-in-ie-not-in-ff-or-opera
http://www.webmasterworld.com/html/3991908.htm



If Google's searchbar was acting like an inline image, then setting display as block or vertical-align as bottom should do the trick, as that would remove the additional space intended for character descenders.

However the google script one is supplied doesn't correspond to an image:



<form action="http://www.google.com/cse" id="cse-search-box">
<div>
<input ... />
<input ... />
<input ... />
</div>
</form>

<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=en"></script>

So I wasn't sure if that classic scenario was applicable. Do you have any insight to bear here?

So I had to look for other solutions.

By chance I'd recalled previously the searchbar was in another div without the same issues. i asked myself what it was that was different about the other div, and turns out i had set a fixed height on it. So I put a div around the search bar and set it to a fixed height of 1em.

ptrcao
Jan 18th, 2011, 06:52 PM
I'm also curious as to why your originally solution also worked (albeit it caused a dozen other problems). I mean why does margin and padding help in this scenario, and having narrowed it down to the google searchbar, where could i have applied zero margin and padding to? considering it's a form/script entity, it's not clear how to apply zero margins to it at all. ???

abduraooft
Jan 19th, 2011, 08:36 AM
* is the universal selector. Thus, if we add any CSS property to it, it will be applied on all the elements in the document.

Secondly, all browsers vendors provide a default CSS with the browser, which defines the display behavior of all HTML elements, when there's no user defined style applied to it. This includes some margins,paddings, indents, bullets etc. The values of this default margin and padding may vary from browser to browser.

Thus, when we nullify margins and paddings of all elements using the universal selector, we will get an almost identical display in all browsers. After that, we may set the desired values by using specific selectors.

In your case, the gap was due to the margin/padding of that Google's form element.

albeit it caused a dozen other problems It won't be that much hard to fix the "issues" caused by adding that universal reset.

ptrcao
Jan 19th, 2011, 08:54 AM
* is the universal selector. Thus, if we add any CSS property to it, it will be applied on all the elements in the document.

Secondly, all browsers vendors provide a default CSS with the browser, which defines the display behavior of all HTML elements, when there's no user defined style applied to it. This includes some margins,paddings, indents, bullets etc. The values of this default margin and padding may vary from browser to browser.

Thus, when we nullify margins and paddings of all elements using the universal selector, we will get an almost identical display in all browsers. After that, we may set the desired values by using specific selectors.

In your case, the gap was due to the margin/padding of that Google's form element.
It won't be that much hard to fix the "issues" caused by adding that universal reset.

can I apply styles directly to a form?

abduraooft
Jan 19th, 2011, 08:58 AM
can I apply styles directly to a form?
Sorry, I didn't get you. I think you are after CSS specificity (htmldog.com/guides/cssadvanced/specificity/).

ptrcao
Jan 19th, 2011, 09:08 AM
Sorry, I didn't get you. I think you are after CSS specificity (htmldog.com/guides/cssadvanced/specificity/).

I'm sold abduraooft; I'll begin to implement a universal reset - that's another one on a long list of troubleshooting problems. :(

My question though, was could in the meantime, is there a way to directly adjust the google form's margins/padding?

As in does this make sense and should it work?

<form styles="margin: 0; padding: 0;">
...
</form>

abduraooft
Jan 19th, 2011, 09:16 AM
My question though, was could in the meantime, is there a way to directly adjust the google form's margins/padding?

Yes, didn't you notice the effect the other CSS?

#centralcolumn2 div form
The above selector targets all the forms under #centralcolumn2, wrapped by an additional div
Thus, if you set an id or class to that wrapper div, say id="google-cse", you'll get an even more specific selector, like

#google-cse form{

}