PDA

View Full Version : CSS class naming

mbay
09-30-2005, 07:34 PM
Hello Everyone!

I am troubleshooting a css layout between I.E. and Mozilla. I know that certain parameters don't react the same, but is this so with naming a class? Can naming a class be so many characters, and if it is too long then it will not respond?

Thank you kindly for any advice,

mbay
_Aerospace_Eng_
09-30-2005, 07:46 PM
How about you show us your code? Class names or ID's can't being with a hyphen or underscore in IE so if you have named your classes in this fashion then yes it won't work.
mbay
09-30-2005, 07:52 PM
Hi Aerospace!

Thanks for replying. Here is the css coding I am inquiring about:

div.sidedish .boxlight {
width: 200px;
height: 75px;
float: left;
position: relative;
background-color: #E3C98A;
border-bottom: solid 1px #3B2000;
border-left: solid 1px #3B2000;
}

It seems I.E. doesn't want to recognize the width and height anymore.

--

Here's a direct link:

http://flyservers.registerfly.com/members5/mbay.ca/ph.html
Lerura
09-30-2005, 08:46 PM
the way you have made is refering to any tag with Class="boxlight" inside a <Div Class="sidedish">
By only separating items with a " "(space) you tell the script to only apply to an Item2 within an Item1
u must use a "," if want it to refer to 2 different Items.
I assume that u want it to refer to either <Div Class="sidedish"> or <Div Class="boxlight">
Then you must change the first line to div.sidedish, div.boxlight {
as a guide you can take a look at http://www.blooberry.com/indexdot/css/examples/examples.htm
mbay
10-01-2005, 12:43 AM
Hi lerura!

thanks for replying!

Honestly, I'm not too sure if I follow exactly. I would like the css to apply the class "boxlight" which is inside "sidedish". Is that what you mean?

I will review the link you gave me.

Thanks again!
Lerura
10-01-2005, 01:32 AM
if it is the intention then this line is fine.

i can't seem to find any errors in the stylesheet.

if you post the full coding of you page then i will take a look at it.
mbay
10-01-2005, 04:35 PM
Hi lerura!

Thanks for offering to take some time to look at it.

Live: http://flyservers.registerfly.com/members5/mbay.ca/ph.html

Index.html Coding:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to HollyWood Pizza! | Food and entertainment at your door!</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/ph_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="banner"></div> <!-- End Banner -->
<div class="pizza">
<h1><img src="images/title_pizza.gif" width="555" height="35" border="0" alt="Our Stone Oven Baked Pizzas" /></h1>
<div class="store">
<div class="boxlightleft">
<div class="pizzabox">
</div> <!-- End PizzaBox -->
</div> <!-- End Boxlightleft -->
<div class="boxdark">
<div class="pizzabox">
</div> <!-- End PizzaBox -->
</div> <!-- End Boxdark -->
<div class="boxdarkleft">
<div class="pizzabox">
</div> <!-- End PizzaBox -->
</div> <!-- End Boxdarkleft -->
<div class="boxlight">
<div class="pizzabox">
</div> <!-- End PizzaBox -->
</div> <!-- End Boxlight -->
</div> <!-- End Store -->
</div> <!-- End Pizza -->
<div class="specials">
<h1><img src="images/title_specials.gif" width="555" height="35" border="0" alt="Our Stone Oven Baked Pizzas" /></h1>
<div class="kitchen">
<div class="boxlittlelightright">
<div class="combo">
</div> <!-- End Combo -->
</div> <!-- End Boxlittlelightright -->
<div class="boxlittledark">
<div class="combo">
</div> <!-- End Combo -->
</div> <!-- End Boxlittledark -->
<div class="boxlittledarkright">
<div class="combo">
</div> <!-- End Combo -->
</div> <!-- End Boxlittledarkright -->
<div class="boxlittlelight">
<div class="combo">
</div> <!-- End Combo -->
</div> <!-- End Boxlittlelight -->
<div class="boxlittlelightright">
<div class="combo">
</div> <!-- End Combo -->
</div> <!-- End Boxlittlelightright -->
<div class="boxlittledark">
<div class="combo">
</div> <!-- End Combo -->
</div> <!-- End Boxlittledark -->
<div class="boxlittledarkright">
<div class="combo">
</div> <!-- End Combo -->
</div> <!-- End Boxlittledarkright -->
<div class="boxlittlelight">
<div class="combo">
</div> <!-- End Combo -->
</div> <!-- End Boxlittlelight -->
</div> <!-- End Kitchen -->
</div> <!-- End Specials -->
<div class="sidedish">
<h1><img src="images/title_sidedish.gif" width="365" height="35" border="0" alt="sidedish" /></h1>
<div class="nopic">
<div class="boxlight">
<div class="combo">
</div> <!-- End Combo -->
</div> <!-- End Boxlight -->
<div class="boxlight">
<div class="combo">
</div> <!-- End Combo -->
</div> <!-- End Boxlight -->
</div> <!-- End nopic -->
</div> <!-- End Sidedish -->
</div> <!-- End container -->
</body>
</html>

CSS Coding:

/* CSS Coding for HollyWoodPizza.Ca and PizzaHollywood.Ca - Copyrighted 2005 by mbay.ca */
/* Compatibilty tested successfully with Interent Explorer 6.0 and Mozilla Firefox 1.0.7 */

body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background-color: #1A3700;
}

div.container {
position: absolute;
top: 20px;
left: 110px;
width: 780px;
height: auto;
border: none;
}

div.banner {
position: absolute;
top:0px;
left: 0px;
background-image: url('../images/ph_banner.gif');
width: 100%;
height: 224px;
border: solid 1px #D8D6B3;
}

div.kitchen {
float: right;
position: relative;
background-color: #000000;
background-image: url('../images/kitchen.gif');
background-repeat: no-repeat;
background-position: left;
width: 780px;
height: 305px;
}

div.nopic {
float: right;
position: relative;
background-color: #000000;
width: 780px;
height: auto;
}

div.pizza {
position: absolute;
top: 226px;
left: 0px;
background-color: #000;
width: 100%;
height: auto;
border-left: solid 1px #D8D6B3;
border-right: solid 1px #D8D6B3;
border-bottom: solid 1px #D8D6B3;
}

div.sidedish {
position: absolute;
top: 890px;
left: 0px;
background-color: #000;
width: 100%;
height: auto;
border-left: solid 1px #D8D6B3;
border-right: solid 1px #D8D6B3;
border-bottom: solid 1px #D8D6B3;
}

div.sidedish .boxlight {
width: 200px;
height: 75px;
float: left;
position: relative;
background-color: #E3C98A;
border-bottom: solid 1px #3B2000;
border-left: solid 1px #3B2000;
}

div.specials {
position: absolute;
top: 549px;
left: 0px;
background-color: #000;
width: 100%;
height: auto;
border-left: solid 1px #D8D6B3;
border-right: solid 1px #D8D6B3;
border-bottom: solid 1px #D8D6B3;
}

div.store {
float: left;
position: relative;
background-color: #000000;
background-image: url('../images/store.gif');
background-repeat: no-repeat;
background-position: right;
width: 780px;
height: 287px;
}

div.boxlight {
float: left;
position: relative;
background-color: #E3C98A;
width: 270px;
height: 142px;
border-bottom: solid 1px #3B2000;
border-right: solid 1px #3B2000;
}

div.boxlittlelight {
float: right;
position: relative;
background-color: #E3C98A;
width: 270px;
height: 75px;
border-bottom: solid 1px #3B2000;
border-right: solid 1px #3B2000;
}

div.boxlightleft {
float: left;
position: relative;
background-color: #E3C98A;
width: 269px;
height: 142px;
border-left: solid 1px #3B2000;
border-bottom: solid 1px #3B2000;
border-right: solid 1px #3B2000;
}

div.boxlittlelightright {
float: right;
position: relative;
background-color: #E3C98A;
width: 268px;
height: 75px;
border-left: solid 1px #3B2000;
border-bottom: solid 1px #3B2000;
border-right: solid 1px #3B2000;
}

div.boxdark {
float: left;
position: relative;
background-color: #DDB67A;
width: 270px;
height: 142px;
border-bottom: solid 1px #3B2000;
border-right: solid 1px #3B2000;
}

div.boxlittledark {
float: right;
position: relative;
background-color: #DDB67A;
width: 270px;
height: 75px;
border-bottom: solid 1px #3B2000;
border-right: solid 1px #3B2000;
}

div.boxdarkleft {
float: left;
position: relative;
background-color: #DDB67A;
width: 269px;
height: 142px;
border-left: solid 1px #3B2000;
border-bottom: solid 1px #3B2000;
border-right: solid 1px #3B2000;
}

div.boxlittledarkright {
float: right;
position: relative;
background-color: #DDB67A;
width: 268px;
height: 75px;
border-left: solid 1px #3B2000;
border-bottom: solid 1px #3B2000;
border-right: solid 1px #3B2000;
}

div.combo {
position: relative;
top: 4px;
left: 5px;
background-color: transparent;
background-image: url('../images/pizza1.gif');
background-repeat: no-repeat;
background-position: left;
width: 263px;
height: 67px;
}

div.pizzabox {
position: relative;
top: 4px;
left: 5px;
background-color: transparent;
background-image: url('../images/pizza2.gif');
background-repeat: no-repeat;
background-position: left;
width: 263px;
height: 133px;
}

h1 {
margin: 0; /* For Mozilla */
background-color: #3B2000;
height: 35px;
}
Lerura
10-01-2005, 10:19 PM
the problem is not the div.sidedish .boxlight settings.
It's like IE gets used to render <Div class="combo"> in its full width (263px, which is the width that div.sidedish .boxlight is rendered at) and won't accept that you later on try to squize it.

I tried:
div.combo { width: 100 }
then the .sidedish .boxlight division was rendered properly

i assume that the width set for .combo is so you can write something to the right of the background picture.

But it cant be done this way.
any float:or margin: that you may set will have effect on the background picture as well.

To do that you must place a div with no background picture to the right of the <Div class="combo">

hope this can help you
mbay
10-02-2005, 04:20 AM
lerura,

I thank you immensely for taking the time to look this over. It has helped me greatly. I understand now perfectly why it was not resizing.

Thank you kindly and very much again.