Various issues with styling

HTML & CSS
1

i guess i will be checking and posting on this thread for the next 3 days or so to sort out some quirks between browsers.

Problem #1
in OPERA, on the contact.html page, something is happening between the “.clear_it” class and the “#volun_msg” id that there IS NO margin-top as specified in the “#volun_msg” styling.

i have very limited experience with OPERA-actually none at all so if anyone
can help me on this thanks a bunch.

Problem #2
when i develop locally, i do so with the latest version of FireFox on Windows.
on the bottom left of the page, you will notice links to facebook, twitter,
and wordpress. now when a visitor navigates BETWEEN the pages, the facebook, twitter, and wordpress logos remain in the same place between the pages on FIREFOX. however, in ANY other browser when a visitor say navigates from the home page to the about page, the facebook, twitter, and wordpress links shift up 1/2/3 px when it doesn’t do that in Firefox. this is really irritating and i know most visitors won’t even notice, but it is bothering me and if anyone had experience with this please let me know what is going on. i really want to make the entire footer look consistent pixel by pixel across ALL major browsers.

there is another minor issue in IE6/IE7 dealing with padding on contact page, but i kinda wanted to get these little problems resolved before i moved on and put in the jquery slideshow.

2

haha sorry the site in question is:

http://stevekimforag.com/test/index.html

3

Opera issue-you need to contain your floats because the scrolling div is getting hung on it :slight_smile:


#donate_section{overflow:hidden;}

THe footer is going down a few pixels because the content generated has a greater height. You shouldn’t try and fix this :). You shouldn’t try and make each pages’ heights the same.

I couldn’t see the IE6/7 issue (not that you described it at all lol :))

4

Opera issue-you need to contain your floats because the scrolling div is getting hung on it

Why only Opera? Everyone should be having issues with that.

5

Well every browser needs this, but Opera seems to be choking without it for some reason :). Other browsers can suck it up more apparently.

6
Off Topic:

Damn. Xul-infested bloat, or closed source batmobile? I no can haz favourite browser anymore? : (

7

thanks for the “#donate_section{overflow:hidden;}”. the strange this is I updated Opera this morning and now they have that quirk not showing up. but i am still implementing it on the #donate_section div. i had to change from using the margin-top on the #donate_section to using it on the BOTH the “#paypal_left” and “#paypal_right” divs because the overflow hidden was hiding part of the Paypal image. went from using position: relative -6 to just margin-top: -6px; thanks a lot for that Ryan.

ok then… good discussion going, but im going to have to go back and figure out where ELSE i should be using “overflow:hidden;” on certain divs. is there a certain criteria to when this specific styling is needed for divs? i want to really get better with .css and even if it looks ok i want to put “overflow:hidden” everywhere it SHOULD BE so what are the rules when using “overflow:hidden” on divs?

8

Actually, I’m almost sure there is a thread or sticky that specifically explains this. Well, there is Paul’s float post in the CSS stickies. Everything you ever wanted to know about floats but were afraid to ask!
*edit here http://www.sitepoint.com/forums/showpost.php?p=1374925&postcount=12

You saw with your paypal box how overflow: hidden… hides overflow. Lawlz, that’s its Day Job and Reason For Existence. (o man the french term would’ve sounded so cool and intellectual here, but I forgot it)

Overflow: hidden is safe enough on boxes who don’t have any set dimensions, because they’ll grow to accommodate content instead of clipping it.

Ryan’s using it to enclose floats.
http://gtwebdev.com/workshop/floats/enclosing-floats.php

People used all sorts of things to clear floats and to enclose them (really two different things). Paul O’Brien discovered that, setting overflow to anything other than the (default) overflow: visible means static containers suddenly enclosed their floated children.

Apparently, when a static box has floated children, it doesn’t “see” them, and so does not stretch down to enclose them like it would non-floated children.

However, once you tell that static div that he has to deal with overflow, then the rules change: he needs to “see” those children’s dimensions if he’s going to ever be able to “deal” with overflow. So he sees them and encloses them. If you didn’t set a height on the static container, it won’t actually hide any overflow, because there won’t be any overflow. Same goes for width, if the children were wider than the static container.

As stated earlier, overflow just has to be anything other than visible, so overflow: auto also works. The problem there is, if there are any dimensions on that box, then instead of hiding overflowing content, it’ll make scrollbars, which usually are ugly nasty things. : )

I don’t use overflow unless it’s the best way to enclose a float. Because it does have a Day Job, I don’t use it on dimensioned containers (well, width is usually ok but never with height).

You can take a look at these pages in a Modern Browser and then in IE6 or7, and you’ll see the differences.

One enclosement technique not in that list is floating the container. Floats always see their floats : ) But then someone has to contain that float, etc and depending on the design, Float Absolutely Everything may be the worst solution : )

9

wow a lot of info. when all this is done im gonna have to go back and really get into all the resources you have kindly provided.

ok… so then there is the issue of the footer not staying consistent across browsers. there has to be some way of making it look the same pixel by pixel in terms of height so the footer (facebook, wordpress, twitter) stays in place across pages. what would be the best way to approach something like this? i have seen in other sites that the footer remains in place and was wondering how they went about doing this. before i go and start ripping apart their style pages, maybe i could get the right and better approach from you guys.

10

actually, i had to position something using negative pixels so that it would move up vertically to align more properly with text to the left. so even though i didn’t set a size for the outer div, part of the image that was being aligned vertically using negative pixel sizes was being clipped since it was moving out of the outer div.

thanks again for the resources. too much in fact to go through it all right now, but i will definitely look at the threads and other stuff once i have more time :(.