CSS with different browsers

Report · Aug 04, 2008

hello, i am practicing my mediocre css skills, and have put a page together, that looks just the way i expected on explorer. however, it's a complete mess on firefox, opera and safari. does anyone have any tips? here is the code...

html html

<body>

<div id="header">
<div id="lbox"><span class="imptext">lbox text</span><br />more lbox</div>
<div id="headerpic" ><img src="Lab15/Lab15.5/tourhead.gif" /></div>
<div id="rbox"><span class="imptext">rbox text</span><br />more rbox</div><br /><br />
</div>

<div id="content">
<div id="sidebarleft">
<p>side left</p>
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="centrebox"><img src="Images/handshake.jpg"/></div>
<div id="sidebarright">
<p>side right</p>
<ul id="MenuBar2" class="MenuBarVertical">
<li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
<ul>
<li><a href="#">Item 3.1.1</a></li>
<li><a href="#">Item 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<div id="bottom">
<div id="sidebarleft">
lefttext
</div>
<div id="botcentrebox" class="imptext">botcentre</div>
<div id="sidebarright">
righttext
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>

--------------------------------------------------------------------------------------------------------------------------------------------------------------------
css

@charset "utf-8";
/* CSS Document */

.imptext
{
color:red;
text-decoration:underline;
background-color:#FFFF00;
}

#header
{
border:double;
width:95%;
margin-right:8px;
padding:2px;
background-color:#CCFF66;
}

#headerpic
{
background-color:#00FF99;
position:absolute;
left:40%;
}

#content
{
border:double;
width:95%;
margin-right:8px;
margin-top:3px;
background-color:#FF6633;
padding:2px;
}

#lbox
{
float:left;
background-color:#999999;
margin-bottom:3px;
}

#rbox
{
float:right;
background-color:#00CC00;
}

#sidebarleft
{
float:left;
background-color:#0033CC;
margin:1px;
border:thick;
padding:2px;
}

#sidebarright
{
float:right;
padding:3px;
background-color:#0033CC;
margin:1px;
border:thick;
padding:2px;
}

#centrebox
{
background-color:#339933;
position:absolute;
left:40%;
width:10%;
top: 30%;
}

#centrebox img
{
width:100%;
}

#botcentrebox
{
background-color:#339933;
position:absolute;
left:40%;
}

#bottom
{
border:double;
width:95%;
margin-right:8px;
padding:2px;
background-color:#000000;
}

as i say, i'm only experimenting at the moment, so there is no real content, but am so frustrated at the way different browsers cock up your code. please help

Report · Aug 04, 2008

You are picking the most difficult type of layout to practice mediocre CSS
skills with, you know? Why not start with something easier?

Anyhow, tell us how the page is not correct in these other browsers, please?
It looks OK to me in FF.

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
==================

"malcster2" <webforumsuser@macromedia.com> wrote in message
news:g76cnl$n7n$1@forums.macromedia.com...
> hello, i am practicing my mediocre css skills, and have put a page
> together,
> that looks just the way i expected on explorer. however, it's a complete
> mess
> on firefox, opera and safari. does anyone have any tips? here is the
> code...
>
> html html
>
> <body>
>
> <div id="header">
> <div id="lbox"><span class="imptext">lbox text</span><br />more
> lbox</div>
> <div id="headerpic" ><img src="Lab15/Lab15.5/tourhead.gif" /></div>
> <div id="rbox"><span class="imptext">rbox text</span><br />more
> rbox</div><br
> /><br />
> </div>
>
> <div id="content">
> <div id="sidebarleft">
> <p>side left</p>
> <ul id="MenuBar1" class="MenuBarVertical">
>

<a href="#">Item 1</a></li>
>
<a href="#">Item 2</a></li>
>
<a href="#">Item 3</a></li>
>
<a href="#">Item 4</a></li>
>

> <p> </p>
> <p> </p>
> <p> </p>
> <p> </p>
> <p> </p>
> <p> </p>
> <p> </p>
> <p> </p>
> <p> </p>
> </div>
> <div id="centrebox"><img src="Images/handshake.jpg"/></div>
> <div id="sidebarright">
> <p>side right</p>
> <ul id="MenuBar2" class="MenuBarVertical">
>

<a class="MenuBarItemSubmenu" href="#">Item 1</a>
>

>
<a href="#">Item 1.1</a></li>
>
<a href="#">Item 1.2</a></li>
>
<a href="#">Item 1.3</a></li>
>

> </li>
>

<a href="#">Item 2</a></li>
>
<a class="MenuBarItemSubmenu" href="#">Item 3</a>
>

>
<a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
>
- >
- <a href="#">Item 3.1.1</a></li>
  >
- <a href="#">Item 3.1.2</a></li>
  >
> </li>
>
<a href="#">Item 3.2</a></li>
>
<a href="#">Item 3.3</a></li>
>

> </li>
>

<a href="#">Item 4</a></li>
>

> <p> </p>
> <p> </p>
> <p> </p>
> <p> </p>
> <p> </p>
> <p> </p>
> <p> </p>
> <p> </p>
> <p> </p>
> </div>
> </div>
> <div id="bottom">
> <div id="sidebarleft">
> lefttext
> </div>
> <div id="botcentrebox" class="imptext">botcentre</div>
> <div id="sidebarright">
> righttext
> </div>
> </div>
> <script type="text/javascript">
> 
> </script>
> </body>
> </html>
>
>
> --------------------------------------------------------------------------------
> --------------------------------------------------------------------------------
> ----
> css
>
> @charset "utf-8";
> /* CSS Document */
>
>
> .imptext
> {
> color:red;
> text-decoration:underline;
> background-color:#FFFF00;
> }
>
> #header
> {
> border:double;
> width:95%;
> margin-right:8px;
> padding:2px;
> background-color:#CCFF66;
> }
>
> #headerpic
> {
> background-color:#00FF99;
> position:absolute;
> left:40%;
> }
>
>
> #content
> {
> border:double;
> width:95%;
> margin-right:8px;
> margin-top:3px;
> background-color:#FF6633;
> padding:2px;
> }
>
> #lbox
> {
> float:left;
> background-color:#999999;
> margin-bottom:3px;
> }
>
> #rbox
> {
> float:right;
> background-color:#00CC00;
> }
>
> #sidebarleft
> {
> float:left;
> background-color:#0033CC;
> margin:1px;
> border:thick;
> padding:2px;
> }
>
> #sidebarright
> {
> float:right;
> padding:3px;
> background-color:#0033CC;
> margin:1px;
> border:thick;
> padding:2px;
> }
>
> #centrebox
> {
> background-color:#339933;
> position:absolute;
> left:40%;
> width:10%;
> top: 30%;
> }
>
> #centrebox img
> {
> width:100%;
> }
>
> #botcentrebox
> {
> background-color:#339933;
> position:absolute;
> left:40%;
> }
>
> #bottom
> {
> border:double;
> width:95%;
> margin-right:8px;
> padding:2px;
> background-color:#000000;
> }
>
>
>
> as i say, i'm only experimenting at the moment, so there is no real
> content,
> but am so frustrated at the way different browsers cock up your code.
> please
> help
>

Report · Aug 04, 2008

what do you mean the most difficult type to practice with?

have a look at this page in explorer and firefox. i have removed one or two of the divs to simplyfy. but there is still major differences, mainly the contents(orange background) stretching down. i can fix this by putting hard returns in the xhtml, but i don't think i should have to do that.

http://www.malcmabe.co.uk/z.html

why is there such a difference?

it also looks a mess in the dreamweaver design page, but perfect in microsoft expression.

Report · Aug 04, 2008

> what do you mean the most difficult type to practice with?

Three columns, left/right sidebar with center content.

> why is there such a difference?

You have not yet learned how to clear floats. Add this to your #content
rule -

overflow:hidden;

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
==================

"malcster2" <webforumsuser@macromedia.com> wrote in message
news:g77vmp$kug$1@forums.macromedia.com...
> what do you mean the most difficult type to practice with?
>
> have a look at this page in explorer and firefox. i have removed one or
> two of
> the divs to simplyfy. but there is still major differences, mainly the
> contents(orange background) stretching down. i can fix this by putting
> hard
> returns in the xhtml, but i don't think i should have to do that.
>
> http://www.malcmabe.co.uk/z.html
>
> why is there such a difference?
>
>

Report · Aug 05, 2008

adding overflow:hidden worked a treat.thanks!

but why does it still look a mess on the dreamweaver cs3 design page?

it's as if the design page is ignoring the overflow:hidden part of the css code.

is there a preference i need to turn on?

Report · Aug 05, 2008

It forces the browser to clear all the floats within the container. Your
problem was that the #content div contained floated elements. When an
element is floated, it is removed from the normal flow. When an element is
removed from the normal flow of the code on the page, its container will set
its height without consideration for the height of the floated element. In
other words, the container will collapse around its non-floated contents.
That's what you had happening. It just happened that the way you had built
the page, IE was not collapsing the element, and FF was. By adding the
overflow:hidden style to the container, you force the browser to clear those
floats before rendering the container.

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
==================

"malcster2" <webforumsuser@macromedia.com> wrote in message
news:g795m6$1ud$1@forums.macromedia.com...
> adding overflow:hidden worked a treat.thanks! what does it mean though?

Report · Aug 05, 2008

thats what i thought , the overflow code is for non explorer browsers...why can't these people get together and fix the differences and bugs eh?

anyway, why are the divs in a collapsed state in the dreamweav
design window? even microsoft expression web displays them correctly.

is there a dreamweaver preference i can change that will see the css overflow:hidden code?

Report · Aug 05, 2008

> thats what i thought , the overflow code is for non explorer
> browsers...why
> can't these people get together and fix the differences and bugs eh?

Actually everyone else has - it's explorer that is the outlier. In this
case, Explorer is rendering the page improperly.

> is there a dreamweaver preference i can change that will see the css
> overflow:hidden code?

No. But if you upgrade to CS4 when it's available, you will.

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
==================

"malcster2" <webforumsuser@macromedia.com> wrote in message
news:g7abr1$di2$1@forums.macromedia.com...
> thats what i thought , the overflow code is for non explorer
> browsers...why
> can't these people get together and fix the differences and bugs eh?
>
> anyway, why are the divs in a collapsed state in the dreamweav
> design window? even microsoft expression web displays them correctly.
>
> is there a dreamweaver preference i can change that will see the css
> overflow:hidden code?
>

Report · Aug 05, 2008

i have viewed the page in the design view of cs4 beta, and it still shows the divs in a collapsed state.