Small CSS Problem - Urgent! Willing to pay for fix.

[virtuexru]

Pulling out my hair over this.. basically my problem is resolution wise. If you're under 1024, my page looks crumpled and the div extends over the other div. I want to have a minimum width, so when your at a small resolution, you will have a "scrollbar" instead of the page just cramming together..

 

I'm willing to PayPal $5 to whoever can fix this first.

 

Here are some screenshots:

 

At 1280 res (everything is fine):

http://www.filelime.com/upload/files/screen_02.jpg

 

At 1024 res (messed up, content overflow, should have a bottom width bar):

http://www.filelime.com/upload/files/screen2.jpg

 

And the CSS for the main content and the sidebar:

 

#content_half {

margin-right: 400px;

border: 2px solid #f6e88c;

text-align: left;

background: #FFF url(http://****.com/img/img05.gif) repeat-x top;

padding: 5px;

        min-width: 750px;

}

 

#sidebar {

background: #FFF;

float: right;

width: 300px;

border: 2px solid #CCC;

text-align: left;

padding: 5px;

}

[dbrimlow]

First, unfortunately there is no cross browser support for min-width. Real browsers will obey but, of course, IE thumbs its nose at it. There are a few hacks and bravely tried solutions, but ultimately they don't work as expected.

 

You are not providing the whole problem, though. Although I'm sure others see the same potential problem that I do in the two IDs you did show, a MAJOR cause of most problems are actually not the css, but poorly crafted (or downright wrongly crafted) markup level code and tags.

 

Assuming your markup is correct (a huge assumption without seeing it), the first problem is obvious ... you have a 300px right floated element next to a non-floated, no width specified, 400px margin-right element.

 

But there is clearly something you are leaving out, here, that is allowing #sidebar to act as an absolutely positioned element and "float" over #content_half.

 

Without seeing the markup html and all css, this is impossible to debug with what is shown.

 

CSS is about the "cascading" effect of the styled elements - one directly impacts another and all impact each other. Put one margin 1px over and the whole thing falls like a house of cards.

 

You need to specify a width for both elements and a container that makes them respect the widths.

[virtuexru]

Website is: http://vidbulge.com

 

More of the CSS:

 

#wrap {

padding: 0 30px 0 30px;

}

 

#content {

margin-right: 340px;

border: 2px solid #f6e88c;

text-align: left;

background: #FFF url(http://****.com/img/img05.gif) repeat-x top;

padding: 5px;

}

 

#sidebar {

background: #FFF;

float: right;

width: 300px;

border: 2px solid #CCC;

text-align: left;

padding: 5px;

}

 

What should I change to this?

[SuperBlue]

Well in IE7 min-width works, so what i suggest, (as a quick fix only).

 

#wrap {
  margin: 0 20px; 0 20px;
  min-width: 1210px;
}

 

If you want a smaller min-width, you should play around with other values in your css.

The above works in IE7, and most other actulley "used" browsers.

 

Another quick fix for ealier IE could be to give your weapper div a fixed width inside a conditional comment.

Other then that, i suggest using "em" insted of "px". Because if you change font-size on your corrent page, everything looks even worse then if you where using just a smaller resolution. And keep in mind, people using smaller resolutions are often people who are using a bigger font sizes aswell.

 

You will need to use percentages if you want your page to fill the whole browser window, otherwhise you end up with javascript changing page size, ealier versions IE will most likely allways need its own css rules.

 

I think it whould be alot easier for you to start over from scratch, then it would be to fix your corrent layout, you are also risking ending up with alot of buggy and unnessary css declarations.

 

Just for instance "z-index: 100;" whats up with that, do you really need z-index at all?

[dbrimlow]

Looking at the code and the css, I found a few flaws that will make this layout blow up as written.

 

First, as I mentioned before, ALWAYS check your markup for errors BEFORE blaming the css.

 

You left out a ul tag for div id"menu".

 

If you use a certain DOCTYPE, but use invalid code for that DOCTYPE you can never be certain how it will behave. IE, for sure, will toss it into quirks mode.

 

You are using the xhtml Strict DTD! But, your are then causing all kinds of problems with the markup because it is "invalid" xhtml strict. All images require an "alt" tag Even if you change it to Transitional (which you should), you have some cleanup to do (like closing your img tags!), using proper characters for quotes, ampersands, etc:

change " to "

 

Second, after checking the html markup, and before modifying any css elements, check for errors in your css (typos, parse problems, etc.). If you have css errors, tweaking elements will not solve problems.

 

Your css has a few parse errors for IE (because of the hacks - which could be done with conditional comments instead, but can remain for validation purposes and will not affect the css elements); there is no color value "lightyellow", use the proper color code (in your case #FFFF99).

 

Okay. now that the markup and css is fixed, you can look at the actual elements for fixing. As an aside, the fixes I made will work beautifully in IE (I tested in 6.0) and FF, as the screen is narrowed.

 

As I thought, your layout will not work as written. You have to use percentages for the content_half and content_right and make them both float left and lose those right margins (content_half needs a 30px or so right margin, but you can play with that to taste). Change the four css elements as following

#header {
height: 82px;
background: #CCC url(http://gamebulge.com/img/img01.gif) repeat-x;
margin: 0px;
width:100%
}

#menu ul {
margin: 0;
padding: 0;
list-style: none;
}

#content_half {
        float:left;
border: 2px solid #f6e88c;
text-align: left;
background: #FFF url(http://gamebulge.com/img/img05.gif) repeat-x top;
padding: 5px;
       width: 60%;
}

#content_right {
float: left;
width: 30%;
border: 2px solid #CCC;
background: #FFF;
text-align: left;
padding: 5px;
margin-left:30px
}

 

Now, go back to your markup and cut and paste the entire <div id="content_right"> code to be AFTER the

<div id="content_half"> code (@ line 277 or where it shows </table></div>)

 

You are floating left two IDs so they need to be in the proper order within the markup for which you want to be left, first in order, then right, second in order.

 

And that's it.

 

Works like a charm now.

 

I do suggest that you lose the xhtml DOCTYPE altogether and change it to HTML 4.0 Strict. Then go to the w3c validation tool and fix the markup errors to make it valid html 4.0 Strict (shouldn't be too many).

 

I'll take the Five bucks in cash, please

 

 

[virtuexru]

Hey,

 

thanks for all the help. I tried what you said, but the text from the content on the left is still overflowing :\.

[virtuexru]

#wrap {
  margin: 0 20px; 0 20px;
  min-width: 1210px;
}

 

That worked, PERFECTLY on FireFox, but not in IE5, any ideas? It's fine if it works in IE7, can you check for me?. Thank you.

[ToonMariner]

don't worry about ie5....

[dbrimlow]

Hey,

 

thanks for all the help. I tried what you said, but the text from the content on the left is still overflowing :\.

 

???

 

Hmmm, I wonder if you did it right. I use an old 15" CRT monitor at 1024 x 768 resolution. And Win 2K OS.

 

Both Firefox and IE 6.0 handled my changes at a Window width of 918px (before the navbar menu items dropped beneath the banner).

 

Here are screen-shots for both:

 

in IE 6.0 - http://www.bluesmandeluxe.com/images/inIE2.jpg

 

in FF - http://www.bluesmandeluxe.com/images/inFF2.jpg

 

(I will remove the screenshots in a few days).

 

 

[virtuexru]

Hey,

 

thanks for all the help. I tried what you said, but the text from the content on the left is still overflowing :\.

 

???

 

Hmmm, I wonder if you did it right. I use an old 15" CRT monitor at 1024 x 768 resolution. And Win 2K OS.

 

Both Firefox and IE 6.0 handled my changes at a Window width of 918px (before the navbar menu items dropped beneath the banner).

 

Here are screen-shots for both:

 

in IE 6.0 - http://www.bluesmandeluxe.com/images/inIE2.jpg

 

in FF - http://www.bluesmandeluxe.com/images/inFF2.jpg

 

(I will remove the screenshots in a few days).

 

 

 

Ah Maybe I explained myself wrong.

 

If you go to a video... and then do that, you'll see some text overflow.

 

Give me your PayPal ID, I'll send you $5 for helping me out anyway..

[bronzemonkey]

You haven't made all the recommended changes and your markup contains errors.

 

But if I were you I would

 

- Stick with xhtml strict 1.0 and fix your markup

- Remove all styles from the markup.

- Make sure all you <img> elements are in this format - <img src="" alt="" /> (remove "align" and "border" from the xhtml and close the element properly).

- Remove <font></font> from your xhtml

- Make sure your line breaks are in this format - <br /> not <br/>

 

Just having a quick look at your xhtml, I'd probably use something more like this:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>

<div id="header">
   <div id="logo">
      <h1><a href="#">Logo Text</a></h1>
   </div>
   <div id="menu">
      <ul>
         <li id="menu_games"><a href="#">Games</a></li>
         <li id="menu_videos"><a href="#">Videos</a></li>
         <li id="menu_forums"><a href="#">Forums</a></li>
         <li id="menu_blog"><a href="#">Blog</a></li>
         <li id="menu_contact"><a href="#">Contact</a></li>
      </ul>				
   </div>
</div>

<div id="wrap">
   <div id="content_primary">
      <p class="important"><b>Some important news:</b> some text</p>
      <h2><img src="http://gamebulge.com/img/featured.png" alt="Featured Video" /></h2>

      <div class="video_box">
         <a class="video_thumb" href="#"><img src="#" alt="" /></a>
         <h3>Video Title</h3>
         <p>Description</p>
         <p>Category</p>
         <p>Viewed</p>
      </div>

      <div class="video_box">
         <a class="video_thumb" href="#"><img src="#" alt="" /></a>
         <h3>Video Title</h3>
         <p>Description</p>
         <p>Category</p>
         <p>Viewed</p>
      </div>

      <div class="pages">
         <ul>
            <li><a href="#" title=""></a></li>
            <li><a href="#" title=""></a></li>
            <li><a href="#" title=""></a></li>
            <li><a href="#" title="">Next</a></li>
            <li><a href="#" title="">Last</a></li>
         </ul>
      </div>
   </div> <!-- end of primary content -->

   <div id="content_secondary">
      <div id="links">
         <h2><img src="http://gamebulge.com/img/links.gif" alt="Links" /></h2>
         <ul>
            <li class="home"><a href="#" title="">Home</a></li>
            <li class="topten"><a href="#" title="">Top Ten</a></li>
            <li><a href="#" title="">Funny</a></li>
            <li><a href="#" title="">Extreme</a></li>
            <li><a href="#" title="">Sports</a></li>
            <li><a href="#" title="">Weird</a></li>
            <li><a href="" title="">Fighting</a></li>
            <li class="advertise"><a href="" title="">Advertise</a></li>
         </ul>
      </div>
      <div id="search">
         <h2><img src="http://gamebulge.com/img/search.gif" alt="Search" /></h2>
         <form action="http://vidbulge.com/search.php" method="post">
            <input name="keyword" type="text" size="30" maxlength="45" />
            <input name="submit" type="submit" value="Search!" />
         </form>
      </div>
   </div> <!-- end of secondary content -->
</div>

</body>
</html>

 

I'd float the main content left and the secondary content right. I'd also used fixed widths and a narrower design so that a larger percentage of my audience could view my site without being forced to scroll. And then, since you are using floats, you need to clear them properly by using css to target the divs that contain floated elements:

 

#id-of-a-div-containing-floated-elements:after, .class-of-a-div-containing-floated-elements:after {content: "."; display:block; height:0; font-size:0; clear:both; visibility:hidden;}

/*IE6 only*/
* html #id-of-a-div-containing-floated-elements {height:1%;}
/*IE7 only*/
*:first-child+html #id-of-a-div-containing-floated-elements {min-height:1px;}

 

For example, you would want to properly clear #wrap. Put the IE specific clearing methods in your IE specific conditional stylesheets.

 

This is just the general gist of things. CSS can be used to style everything else as required. Use background images for the links list, the menu, I would actually use them for the logo and titles too...but image replacement techniques are probably something to look at later on. Using CSS with good markup will allow you to change many things on the site without ever touching the markup.

 

You can make a lot of major/minor changes to the site just by altering a few lines in the css stylesheet...without making any changes to the markup: alter the menu images (just change the background images in your css), change the appearance of the "advertise" link, put a border around you "Links" section, move that whole column to the left or into a horizontal row, remove the "important news" paragraph (display:none), and so on.

 

I would not, for example, use ids of "column_right" because I may wish to move that column to the left or turn it into a row - and suddenly my markup becomes confusing. Better to use an id that denotes its hierarchical relationship within the document.

[dbrimlow]

don't worry about ie5....

 

LOL!

 

Once again ... wisdom like pearls.