CSS Problem !

[marSoul]

Hi
I have followed a tutorial about css designing, but i have 2 problems,
One is that the navigation cant be seen in IE7 but it is correct in FF.
Second is when i make the window narrower the sidebar will go downside.
What is the problem ?

the file address is : http://www.marsoul.com/uploads/index.html
and the css file : http://www.marsoul.com/uploads/css\styles.css

Also please tell me why i get 3 validation errors ?

Thanks

[dab42pat]

If you replace your form code with this it should sort the validation.

HTML: Select all

<form id="search" action="somescript.scpt" method="post" name="search">
      <p><input type="text" class="text">
      <input type="submit" value="Search">
</p>
    </form>

dont know if it will mess anything up.

[MikeHopley]

Ho, ho, ho. This is a funny one.

The <li> and <a> elements are there, but the links are not being shown. I believe this is because your href is blank. Try <a href="#"> instead.

The sidebar problem is happening because of the relationship between your two floating columns. You must ensure that there is always enough space at the right for your sidebar, otherwise it will be forced below the content.

You need to wrap a <div> around those two <input> elements. That should fix your validation. A <div> is preferable to <p> because those are not paragraphs!

[marSoul]

warping <div> for those inputs make them valid !
But those two problems still are there !!!

[MikeHopley]

Your first problem is just plain weird. You need to do some hardcore testing: isolate elements and find out what is causing the problem. Create a minimal test case: a page as simple as possible, which still displays the bug. Work from there.

Let me explain what is happening with the sidebar.

You have specified widths for each column in %. These widths sum to 95%. You have also specified margins; your margins sum to 3 ems. Can you see where I'm heading?

Your margins require some space. You have 5% of the viewport remaining. If 5% of the viewport is less than 3 ems, then you run out of space. This will occur when the viewport shrinks below (100/5)*3 = 60 ems.

To correct the problem, simply specify your margins in %, ensuring that your total % width (including margins) sums to less than 100%. Alternatively, use padding instead of margins.

**EDIT**

Hmm, maybe I misread your values. Nevertheless, it's the same principle: make sure that the total width, including margins, does not exceed the viewport width.