Web Development

5-Sep-11 1:26

guys;
I have a problem in design on IE6.
when I write the code like this:

CSS

.main{background-color:gray;padding:5px}
.header{height:40px;background-color:blue;}
.leftnav{float:left;width:50px;height:260px;background-color:red;}
.content{margin-left:50px;height:260px;background-color:white}

HTML

<div class="main">
    <div class=header></div>
    <div class="leftnav"></div>
    <div class="content"></div>
</div>

It looks like this in all browsers

but in IE6 it look like this

what should i do to appear the same in both?

Help people,so poeple can help you.

Morgs Morgan5-Sep-11 21:48

5-Sep-11 21:48

Ali Al Omairi(Abu AlHassan) wrote:
.leftnav{float:left;width:50px;height:260px;background-color:red;}
.content{margin-left:50px;height:260px;background-color:white}

Your class .leftnav is floating left and .content isn't. It could be why. Try something like:

CSS

.leftnav{ float:left; width:50px; height:260px; background:red; }
.content{ float:left; height: 260px; background:white; }

I just eliminated the margin-left on the .content class and replaced it with float:left.

Hope that helps.

Morgs.

Ali Al Omairi(Abu AlHassan)6-Sep-11 1:26

6-Sep-11 1:26

Thank you.
But actualy, the the content div is used to hold Dynamic content (e.g. records from the database).
using float css would make the content to overflow the main div.

consider tha actual css

CSS

.main{background-color:gray;padding:0px 90px}
.header{height:250px;background-color:blue;}
.leftnav{float:left;width:200px;}
.content{margin-left:200px;min-height:450px;}

Logo & Company Name

Item1
Item2
Item3
Item4
Item5

databound
databound
databound
databound
databound
databound
databound
databound
databound
databound
databound
databound
databound
databound
databound
databound

Help people,so poeple can help you.

Morgs Morgan6-Sep-11 2:46

6-Sep-11 2:46

Here is the rule around this:

- if two one elements (e.g. div id="1") is floating left, and the next element also happens to be the same (e.g. div id="2"), the the browser will automatically make div id="2" float left aswell untill it finds a different element type (e.g. img) or a div with style="clear:both/left;" thats when it will go to the next line.

I'm purposly assuming my dear old IE6 won't understand this rule.

- The .main doesn't have a set fixed width or height so this div class="main" will grow automatically and nothing will "Overflow".

- I still insist on making two elements float:left if you want them next to each other, using that margin-left:200px will make you cry endlessly if you care resize the browser or simply when viewed in different browsers. And yes, either .leftnav or .content will be higher/longer than the other one unless if you explicitly set the same height for the classes but like you mentioned .content is loaded dynamically.

Good luck,
Morgs

Ali Al Omairi(Abu AlHassan)6-Sep-11 3:20

6-Sep-11 3:20

with floating;

It would appear like this with no height for .main

Logo & Company Name

Item1
Item2
Item3
Item4
Item5

databound
databound
databound
databound
databound
databound
databound
databound
databound
databound
databound
databound
databound
databound
databound
databound

and like this with adding min-height to .main

Logo & Company Name

Item1
Item2
Item3
Item4
Item5

databound
databound
databound
databound
databound
databound
databound
databound
databound
databound
databound
databound
databound
databound
databound
databound

Help people,so poeple can help you.

modified 2-Nov-11 9:25am.

Keith Barrow6-Sep-11 8:18

Keith Barrow

6-Sep-11 8:18

My e-mail said you left a message on my blog on CP asking for help, but it disappeared. Anyway Morgs Morgan is correct: you should use floats to arrange divs, or you'll find a world of pain. You need to decide whether you want a fixed or fluid layout, personally I think fixed is good. The following is the usual way to achieve a fixed layout:

XML

<html>
  <head>
  <style type="text/css">
    *
    {
        padding:0px;
        margin:0px;
    }

    body
    {
        background-color:gray;
    }

    div#container
    {
        width:640px;
    }

    div#header
    {
        background-color:blue;
        height:40px;
    }

    div#menu
    {
        background-color:red;
        float:left;
        height:400px;
        width:100px;
    }

    div#content
    {
        background-color:white;
        width:540px;
        float:left;
        height:400px;
    }

    .clear
    {
        clear:both;
    }
  </style>
  <head>
  <body>
    <div id="container" >
    <div id="header" >Header</div>
    <div id="menu" >Menu</div>
    <div id="content">Content </div>
    <div id="footer" class="clear" />
  </body>
</html>

I haven't tested the above in IE6, but it should work, that said IEn where n < 8 are so quirky there are lots of things that should work that don't. IIRC think the footer div needs to be expanded and a  

Sort of a cross between Lawrence of Arabia and Dilbert.[^]
-Or-
A Dead ringer for Kate Winslett[^]

Ali Al Omairi(Abu AlHassan)7-Sep-11 1:19

7-Sep-11 1:19

OK, I didn't expect that when I called you. Big Grin | :-D

but about the data, shall I add overflow:auto to the content div css?

Help people,so poeple can help you.

Ali Al Omairi(Abu AlHassan)2-Nov-11 3:30

2-Nov-11 3:30

You were right, Morgs;

the page would look like this

Logo & Company Name

Item1
Item2
Item3
Item4
Item5

databound
databound
databound
databound
databound
databound
databound
databound
databound
databound
databound
databound
databound
databound
databound
databound

sorry for misunderstanding. $Shucks | :-\$

Help people,so poeple can help you.

Morgs Morgan3-Nov-11 0:05

3-Nov-11 0:05

Ali Al Omairi(Abu AlHassan)5-Nov-11 10:48

5-Nov-11 10:48

You are a

:kiss:

Help people,so poeple can help you.

dreamweaver cs4, Design view mode

pankajsinha2-Nov-11 1:36

pankajsinha

2-Nov-11 1:36

CSS

.main{width:100%;background-color:gray;padding:5px}
.header{height:40px;background-color:blue;}
.leftnav{float:left;width:50px;height:260px;background-color:red;}
.content{ width: 70%; float:left;margin-left:50px;height:260px;background-color:white}

Please set the width and float in class "content" and set the width in class "main" to 100% or required width in px

Er. Pankaj Sinha

hrishi3213-Sep-11 19:43

hrishi321

3-Sep-11 19:43

hello all,

I am facing some difficulties with dreamweaver cs4, could anyone please help me out with.
I am new to dreamweaver so my question might be very basic.

I have a ready made page by my friend, which has one submenu(links). On click of the link it opens particular Division(div) on the page itself (something like contentPageHolder)......Now my problem is to view this divisions in design mode.. . Always the first division is being seen. (Ofcoruse since I cannot click the links in design mode) . . Which is the way in order to view different divisions in design mode

Thanks in advance
hrishi

Apply css just in contentpage

Elham M24-Aug-11 21:48

Elham M

24-Aug-11 21:48

Hi guys,
I have table in master&contentpage and in my content page when I add style it apply to both master and contentpage But I want just content page give this style what can I do?below is my code

CSS

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
	<style type="text/css">
	td{height:30px; padding-right: 10px}
	tr{border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: #C0C0C0; }
	</style>
</asp:Content>

Thanks.

Re: Apply css just in contentpage

Morgs Morgan30-Aug-11 21:18