css displying problem

Anything questions related to styling should go in here.
Post Reply
User avatar
ta2shop
Posts: 179
Joined: Sat May 07, 2011 9:07 am
Location: madrid, Spain
Contact:

css displying problem

Post by ta2shop »

hy guys, i got a css problem, the ul and li tags from inside a php file wont display, i mean the styles wont take efect!
the php file has a while loop and i use the ul and li tags in it, i am guesing the problem is from there somehow but just dont got a clue!
the main html file (index.php)
<?php require('cart.php'); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>shopping cart index</title>

<link rel="stylesheet" type="text/css" href="css/style.css">

</head>
<body>
	<div id="wrapper">
    	<div id="topmenu">
            <ul id="text">
            	<li><a href="#">English</a></li>
                <li><a href="#">Spanish</a></li>
                <li><a href="#">Romanian</a></li>
            </ul>
        </div>
        <br>
        <div id="header">
        	<ul id="headbox">
            	<li><a href="index.php"><img src="images/logo.png" border="0" /></a></li>
                <li>search bar</li>
                <li>cart</li>
            </ul> 
        </div>
        <br>
        <div id="menubox">
        	<?php include('menu.php'); ?>
        </div>
<br>        
<div id="cart">
<?php cart(); ?>
<br />
<?php products(); ?>
</div>
        
    </div>
</body>
</html>
and also before i had 3 separate css files, but just to make things esier for my i put them in one single file.
@charset "utf-8";
/* CSS Document */

a{
	font-family:"Arial Rounded MT Bold";
	font-size:14px;
	color:#FF0;
	text-decoration:none;
}

h1{
	font-family:Elephant;
	font-size:36px;
	color:#F00;
	margin:0;
	padding:0;
	text-decoration:none;
}
h3{
	font-family:Elephant;
	font-size:14px;
	font-style:italic;
	font-weight:lighter;
	color:#fff;
	margin:0;
	padding:0;
	text-decoration:none;
	float:left;
}

a:hover{
	font-family:"Arial Rounded MT Bold";
	font-size:14px;
	color:#FF0;
	text-decoration:underline;
}
body{
	margin:0;
	padding:0;
	background-image:url(../images/tattoowal2.png);
	background-attachment:fixed;
	background-position:center top;
	background-repeat:no-repeat;
	background-color:#333;
	font-family:"Arial Rounded MT Bold";
	font-size:14px;
	color:#F00;
}
#wrapper{
	margin:0 auto;
	padding:1px;
	width:60%;
}

#header{
	font-family:"Arial Rounded MT Bold";
	font-size:14px;
	color:#00f;
	margin:0;
	padding:0;
	width:100%;
	height:60px;
	line-height:60px;
}

#headbox{
	margin:0;
	padding:0;
	width:100%;
	height:60px;
	line-height:60px;
}
#headbox li{
	margin:0;
	padding:0;
	width:33%;
	height:60px;
	line-height:50px;
	list-style-type:none;
	display:inline;
	float:left;
}
#headbox li a{
	margin:0;
	padding:0;
	font-family:"Arial Rounded MT Bold";
	font-size:14px;
	color:#FFF;
	text-align:center;
	text-decoration:none;
}
#headbox li a:hover{
	margin:0;
	padding:0;
	font-family:"Arial Rounded MT Bold";
	font-size:14px;
	color:#F00;
	text-align:center;
	text-decoration:none;
}

#topmenu{
	background-color:#F1F1F1;
	width:100%;
	height:40px;
	line-height:40px;
	background-image:url(../images/topgray.png);
	background-repeat:repeat-x;
}
#text{
	margin:0;
	padding:0;
	width:40%;
	height:40px;
	line-height:40px;
}
#text li{
	margin:0;
	padding-right:5px;
	padding-left:5px;
	list-style-type:none;
	display:inline;
}
#text li a{
	margin:0;
	padding:0;
	text-align:center;
	text-decoration:none;
	font-family:"Arial Rounded MT Bold";
	font-size:16px;
	color:#000;
}
#text li a:hover{
	margin:0;
	padding:0;
	text-align:center;
	text-decoration:underline;
	font-family:"Arial Rounded MT Bold";
	font-size:16px;
	color:#F00;
}
.users{
	margin:0;
	padding:0;
	width:40%;
}
/*******************************cart.css*/
#cart{
	margin:0 auto;
	padding:0;
	width:100%;
	border:solid #FFF 1px;
	font-family:"Arial Rounded MT Bold";
	font-size:16px;
	color:#FFF;
	font-weight:lighter;
}
#products{
	margin:0 auto;
	padding:10px;
	text-decoration:none;
	font-family:"Arial Rounded MT Bold";
	font-size:16px;
	color:#fff;
	border:solid #FFF 1px;
	width:180px;
	height:180px;
	display:inline-block;
}
#products ul{
	margin:0;
	padding:0;
}
#products li{
	margin:0;
	padding:0;
	list-style-type:none;
	display:inline-block;
	float:left;
}
#products li a{
	font-family:"Arial Rounded MT Bold";
	font-size:16px;
	color:#F00;
	text-decoration:none;
	margin:0;
	padding:0;
}
#products li a:hover{
	font-family:"Arial Rounded MT Bold";
	font-size:16px;
	color:#F00;
	text-decoration:underline;
	margin:0;
	padding:0;
}
#menubox{
	width:100%;
	margin:0 auto;
	padding:0;
}
/******************************menu.css*/
#menu{
	margin:0;
	padding:0;
	width:100%;
	height:42px;
	line-height:42px;
}
#menu li{
	margin:0;
	padding:0;
	list-style-type:none;
	text-align:center;
	display:block;
	float:left;
	height:40px;
	line-height:40px;
	width:19.8%;
	background-color:#f1f1f1;
	border:solid #000 1px;
}
#menu li:hover{
	margin:0;
	padding:0;
	list-style-type:none;
	text-align:center;
	display:block;
	float:left;
	height:40px;
	line-height:40px;
	width:19.8%;
	background-color:#ccc;
}
#menu li a{
	margin:0;
	padding:0;
	font-family:"Arial Rounded MT Bold";
	font-size:26px;
	color:#000;
	text-align:center;
	text-decoration:none;
	width:100%;
	height:40px;
	line-height:40px;
}
#menu li a:hover{
	margin:0;
	padding:0;
	font-family:"Arial Rounded MT Bold";
	font-size:26px;
	color:#000;
	text-align:center;
	text-decoration:none;
	width:100%;
	height:40px;
	line-height:40px;
}
thanks guys.

P.S: this is post number 101 :lol:
Image
Silkenthread
Posts: 6
Joined: Tue May 24, 2011 5:33 pm

Re: css displying problem

Post by Silkenthread »

I created a class incerted it after the (a). I have checked it out and this works,
 <div id="header">
                <ul id="headbox">
                <li><a class="headbox" href="index.php"><img src="images/logo.png" border="0" /></a></li>
                <li>search bar</li>

/*------css for new class headbox-------------------*/
.headbox{
        margin:0;
        padding:0;
        width:100%;
        height:60px;
        line-height:60px;
}

.headbox li{
        margin:0;
        padding-right:5px;
        padding-left:5px;
        list-style-type:none;
        display:inline;
}
.headbox li a{
        margin:0;
        padding:0;
        text-align:center;
        text-decoration:none;
        font-family:"Arial Rounded MT Bold";
        font-size:16px;
        color:#000;
}
.headbox li a:hover{
        margin:0;
        padding:0;
        text-align:center;
        text-decoration:underline;
        font-family:"Arial Rounded MT Bold";
        font-size:16px;
        color:#F00;
}
/*---------------------------------------------*/

Hope this helps.
Post Reply