PDA

View Full Version : CSS: Bugging FF / IE 100% viewport issue with a twist.



whoopass
Jul 13th, 2009, 10:35 PM
Ok so I've read up on the CSS issues of this and I really get annoyed sometimes with all these hacks and fixes people use to get around things. I tried a few but to no avail.

The reason why this is a twist is because and I will admit, I'm a lazy person when it comes to doing this but I really hate trying to accommodate the "equal width" columns concept. I know of a couple fixes but they always confuse me and get me trying more work then should really be needed to do what I want.

So essentially I just build a site from left to right with floating elements. Now currently this site: http://www.xhl.co.cc/ is what I'm working on.

The issue is the left and right sides that have the FF bug. It works fine in IE (not 6, well the sides do but I don't care about 6 lol) but of course getting one to work and then the other is like asking to win the million - it just doesn't ever happen lol.

Anyway this is a non-profit site, it's used for a hockey league to store stats and keep it up to date. It was put together last minute and it's all done from scratch, I did the design in PS (not great but meh) sliced it and did the CSS which is generally working well. And I coded the applications with PHP (my strong point).

Here's the code of what the html looks like:

With the exception of the content wrapper (which changes for the main page) this is what every page is basically running.



<!-- Holds whole site -->
<div id="sitewrapper">
<div id="leftside"></div> <!-- Left Column -->

<!-- Holds Inner Site -->
<div id="innerwrapper">

<? include("links.php"); ?>

<div class="clearer"></div> <!-- Clear Row -->

<!-- Content Wrapper -->
<div class="content">
<!-- Text Styling For Content -->
<div class="textholder">
</div><!-- Close Text Styling For Content -->
</div><!-- Close Content Wrapper -->


</div> <!-- Close Inner Wrapper -->

<div class="noclear"></div> <!-- Don't Clear -->

<div id="rightside"></div> <!-- Right Column -->

</div><!-- Close Site Wrapper -->


Now the CSS is a mess probably because I define a lot stuff and don't look to find ways to condense it so I'll post the relevant css id's and classes instead of the whole file - since I don't care to tamper with anything that's fine and working. If I could fix the outer borders I'd be happy.



html, body { /* sets the pages to take full height on all forms */ height: 100%; }

body { /* sets the page to take up full space */
margin: 0px;
padding: 0px;
border: 0px;
text-align: center;
background-color: #000000;
font-size: 11px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
color:#CCCCCC; }

.clearer { clear: both; }
.noclear { clear: none; }

/* Site Wrappers */
#sitewrapper {width: 960px; height: 100%; margin: 0 auto; position: relative; }
#innerwrapper {float: left; width: 940px; height: 1036px; }
#navwrapper {float: left; width: 940px; height: 53px; }
#newswrapper {float: left; width: 940px; height: 466px; }
#contentwrapper {float: left; width: 940px; height: 517px; }

/* Site Side Columns */
#rightside {float: left; width:10px; height: 100%;
background-image:url(images/rightside.png);
background-repeat: repeat-y; }
#leftside {float: left; width:10px; height: 100%;
background-image:url(images/leftside.png);
background-repeat: repeat-y; }

/* Text Formats */
.content {float: left; width:940px; height: 100%;
background-color: 222222; }


Any assistance would be appreciated - I really need to get on learning the proper way of doing this. While my CSS is generally clean, well documented and separated from any code - it's not efficient in making it SE friendly and the works.

Thanks in advance for any support :)

Kyle

drhowarddrfine
Jul 13th, 2009, 11:26 PM
The problem is you are looking at IE, see it works in this antique web browser, and wonder why a state of the art browser doesn't act the same. Never, ever do that. Always, always use a modern browser, such as ANYTHING but IE, and then look to see if/when IE screws it up. But there are hundreds of sites dedicated to fixing the known bugs in IE and NONE for any other browser.

Your first issue is you aren't using a doctype. Without one, IE goes into quirks mode and won't attempt to perform like any other more modern browser. Add this to your first line:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Then validate your html and css for those lists of errors and never, ever trust IE to do ANYTHING right. Firefox is showing what you wrote.

whoopass
Jul 15th, 2009, 07:50 AM
Ok well first of thanks for the reply, appreciate the help :) and just to clarify no I don't use IE as my standard, I hate IE hence the comments about making hacks for it to work and the such. I'm FF all the way and that's what I look to make things work with and then worry about IE. My comment about IE working just states - ok somethings funky, cause IE works and FF doesn't.

Anyway not the point. Normally dreamweaver defaults by adding that line to every new document you make however since I cleared the index page to pop in my routing php code and then just import the specific files I want, I forgot to punch that in lol but thanks for letting me know.

That being said, now punching in the doctype FF is going all ape ****. What for, I'm not sure. The .content class with the background colour of #222222 (used in several areas of my design along with other items being defined with that colour code) are not displaying. I'm either assuming there is something up with background-color or the entire div setup.

To note, it's not just restricted to classes, ids are also doing the issue too.

Now I went through and made sure to add # in front of all my colour codes because figured maybe w3schools was setting the "standard" and that was improper use but to no avail. So I'm going to read up on the w3standards and see if I can get anything out of it. If you think it would help to have the whole css file just let me know. Other than punching in the doctype (exactly as you typed it) I haven't changed anything so what you see here, if it should work fine in FF for displaying a background colour, then that's what I have and in theory it should work lol.

Not to burst your bubbles tho lol - IE8 still looks the way it did before the issue.

drhowarddrfine
Jul 15th, 2009, 05:39 PM
My comment about IE working just states - ok somethings funky, cause IE works and FF doesn't.
Dreamweaver has always been IE-centric and may explain that.


That being said, now punching in the doctype FF is going all ape ****. What for, I'm not sure.Adding the doctype changes the rules.

If you think it would help to have the whole css file just let me know.We can get everything just from the link.
Other than punching in the doctype (exactly as you typed it) I haven't changed anything so what you see hereAdd it to the online site. Otherwise, it's far more difficult to help. You'll need the doctype no matter what.


Not to burst your bubbles tho lol - IE8 still looks the way it did before the issue.
What it looks like in IE never matters if it doesn't look right in the more advanced, modern browsers.

whoopass
Jul 15th, 2009, 09:35 PM
Ok thanks again for the tips, ah I just checked out the page source and realized that that link minimizes the full source preview (unless you go digging for it) so to make things easier here is the full original directory link

http://www.sterlingsavvy.com/XHL/index.php

The page now appears to be rendering fine in FF except for the original issue with the 100% only going to the view port no further.

And yeah I've read up on XHTML and why doctypes are important. I understand and agree with the gist of it. I also did a check with the validator through w3 so there's a few conflicts with ID's I need to look at.

The things you miss when you're just making things leisurely lol.

Thanks for all your help, it's much appreciated :)

drhowarddrfine
Jul 16th, 2009, 12:57 AM
The page now appears to be rendering fine in FF except for the original issue with the 100% only going to the view port no further.


This is another reason why you should never look at IE. FF is performing correctly. Elements are never to expand to contain floated elements. This is a bug in IE (as usual).

To get FF to contain that, in #sitewrapper, remove 'height:100%' and add 'overflow:auto'. At least, I think that's what you're talking about.

whoopass
Jul 16th, 2009, 03:35 AM
Ok we're getting a little bit of progress. Now for some reason (originally it was doing it vertically and horizontal but I managed to remove the vertical one) with the overflow it's trying to make it scrollable like it's a frame (which is not a desired effect).

I also forced the size of the left and right columns to extend the size of the page so you'll get what I'm trying to do - those columns that go past the site I want them to be fluent with the site pages.

I realize the best trick to do this is to have the div within the div extending past but I can never seem to get it right. I tried doing that with the inner wrapper, like putting the two divs outside that inner wrapper and then closing them after the inner wrapper and then use margin to put them in place but that didn't do what I wanted. So I reverted it back to the left floating before inner and then the right floating after.

I can't use an absolute position for it because the site has adjustable margins to make it centre. I suppose if I could get that div within the column idea to work I could use a relative positioning but it's just trying to get the div within the column "hack" to work.

This is why I never bother it drives me nuts lol.

And this time around I'm not even going to comment on what IE is doing cause as it should be it looks horrid compared to FF lmao.