Help Correcting CSS Please
Hello,
Please can I have A CSS Expert help a little....
My CSS below; isn't working...
The table isn't showing all of the borders,...
Also....
My H1, P tags etc are all requiring that i set the width to 100% or the eleents below all stack up...
Please let me know how best to correct....
Thank you
Please can I have A CSS Expert help a little....
My CSS below; isn't working...
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body
{
margin: 0px;
background-image: url("../images/body.png");
background-position: center top;
background-repeat: repeat-x;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
.clear{
clear:both;
}
ol, ul {
list-style:none;
}
.pagesplit{
width:100%;
float:left;
position:relative;
}
.wrapper{
margin:0 auto;
width:1000px;
position: relative;
overflow: visible;
}
.headsection{
position: relative;
margin-bottom: 8px;
}
.navigationsection{
height:34px;
position: relative;
margin-bottom: 8px;
}
.navigationsection ul{
float:left;
position:relative;
list-style:none;
width:100%;
margin:0;
padding:0;
background-image:url(../images/navigation.jpg);
background-repeat:no-repeat;
}
.navigationsection li{
float:left;
font-size: 12px;
font-weight: lighter;
}
.navigationsection a{
display: block;
line-height:32px;
padding:0px 12px;
width: 75px;
text-align: center;
text-decoration: none;
/* [disabled]font-weight: bold; */
color: #9e1f6a;
}
.maincontent{
position: relative;
}
.footer{
position: relative;
}
.maincolumn{
float:left;
position:relative;
width: 796px;
margin-left: 6px;
}
.maincolumn h1{
margin: 0px 0px 10px;
font-size: 36.4px;
font-weight: lighter;
color: #00257A;
border-bottom: 1px solid #ccc;
padding-bottom: 6px;
letter-spacing: -0.5px;
float: left;
width: 795px;
}
.rightcolumm{
float:right;
position:relative;
width:172px;
margin-right: 6px;
}
.logoarea{
float:left;
position:relative;
width:300px;
height: 75px;
background-color: #666666;
}
.topnonlogo{
float:right;
position:relative;
width:690px;
}
.topbar-form-section, .topbar-account-section{
position:relative;
float:right;
width: 100%;
}
.topbar-form-section{
height:75px;
}
/* RightColumn Menu Bar*/
.product_menu{
border-bottom: 2px solid #f7f7f7;
margin-bottom: 20px;
margin-top: 0px;
padding-top: 0px;
}
.product_menu h2 {
background: #d7d7d7 url(../images/productmenu-h1-bg.png) no-repeat left top;
height: 30px;
border: 1px solid #d7d7d7;
border-bottom: 0;
margin-top:0;
padding-top:0;
margin-bottom:0;
}
/* Hide Text From Element */
.product_menu h2 span{
position: absolute;
left: -50000px;
}
#prod_nav {
position: relative;
z-index: 300;
border-left: 1px solid #d7d7d7;
border-right: 1px solid #d7d7d7;
border-bottom: 2px solid #d7d7d7;
float: left;
}
#prod_nav li.top {
display: block;
float: left;
width: 170px;
border-top: 1px solid #d7d7d7;
border-bottom: 1px solid #fbfbfb;
height: 31px;
}
#prod_nav li a.top_link {
font-size: 11px;
display: block;
width: 159px;
padding-left: 11px;
line-height: 31px;
color: #9e1f6a;
text-decoration: none;
cursor:pointer;
background: #f0f0f0;
}
#prod_nav li a.top_link span, #prod_nav li a.top_link span.down {
display: block;
padding-right: 20px;
background: url(../images/productmenu-arrow.gif) no-repeat right center;
}
#prod_nav li:hover a.top_link {
color:#9e1f6a;
background: #fff;
}
.list{
margin:0;
padding: 0;}
#search{
height: 44px;
float: right;
}
#search{
}
#search {
width: 332px;
float: right;
}
#search input, #search input.button {
border: 0;
float: left;
margin-top: 9px;
}
#search input {
padding: 5px 5px 7px;
width: 282px;
font-size: 11px;
color: #252525;
background: url(../images/search-input_btn.png) no-repeat left top;
}
#search input.button {
width: 28px;
height: 25px;
padding: 0;
background: #f7941d url(../images/search_btn2.png) no-repeat left top;
cursor: pointer;
}
.breadcrumbs{
position:relative;
float:left;
margin:0px 0px 4px 0px;
padding:0px 0px 12px 0px;
color: #EA93C7;
width: 795px;
clear: both;
border-bottom: 1px dotted #ccc;
}
.breadcrumbs a{
font-weight: bold;
color: #821A58;
}
.mainparagraph{
font-size:12px;
margin: 0px 0px 8px;
color: #333;
float: left;
}
.footer h2, .footer p{
margin:0;
padding:0;
}
.footer h2{
color: #9e1f6a;
margin-bottom: 0.2em;
font-weight: normal;
}
.footer p{
color:#CCCCCC;
margin-bottom:0.2em;
}
.footer p.copyright
{
color: #666666;
margin-bottom: 0.4em;
}
.fulllengthtable{
width:795px;
float:left;
position:relative;
margin-bottom: 8px;
border-collapse:collapse;
}
.fulllengthtable .titlerow{
background-image:url(../images/tablehd.jpg);
background-repeat:no-repeat;
background-position:top;
line-height:35px;
}
.fulllengthtable td{
padding:6px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="pagesplit">
<div class="wrapper headsection">
<div class="logoarea">logoarea</div>
<div class="topnonlogo">
<div class="topbar-account-section">Welecome xxxx | Logout</div>
<div class="topbar-form-section">
<div id="search">
<form id="searchform" name="searchform" action="02-Orange-01-Home-Page.html">
<input name="search" type="text" tabindex="1" onblur="if (this.value==''){this.value='enter a keyword or an item #'};" onfocus="if(this.value=='enter a keyword or an item #'){this.value=''};" value="enter a keyword or an item #" />
<input name="search" type="submit" value="" class="button" />
</form>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="pagesplit">
<div class="wrapper navigationsection">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Members</a></li>
<li><a href="#">Suppliers</a></li>
<li><a href="#">Two Words</a></li>
<li><a href="#">button two</a></li>
<li><a href="#">Uplift</a></li>
<li><a href="#">button four</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Finance</a></li>
<li><a href="#">Admin</a></li>
</ul>
</div>
</div>
<div class="pagesplit">
<div class="wrapper maincontent">
<div class="maincolumn">
<p class="breadcrumbs"><a href="#">Breadcrumbs</a> > <a href="#">breadcrumbs</a> > <a href="#">breadcrumbs</a></p>
<h1>Heading</h1>
<p class="mainparagraph">Description</p>
<table border="0" cellpadding="0" cellspacing="00" class="fulllengthtable">
<tr class="titlerow">
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<p> </p>
<p class="mainparagraph"> </p>
<p> </p>
</div>
<div class="rightcolumm">
<div class="product_menu">
<ul id="prod_nav" class="list">
<li class="top"><a href="#" class="top_link"><span class="down">View Orders</span></a></li>
<li class="top"><a href="#" class="top_link"><span>Create Order</span></a></li>
<li class="top"><a href="#" class="top_link"><span>Batch Orders</span></a></li>
<li class="top"><a href="#" class="top_link"><span>Product Search</span></a></li>
<li class="top"><a href="#" class="top_link"><span>Create Product</span></a></li>
<li class="top"><a href="#" class="top_link"><span class="down">Product Categories</span></a></li>
<li class="top"><a href="#" class="top_link"><span>Nominal Codes</span></a></li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="pagesplit">
<!--#include file="../parts/footer.asp" -->
</div>
</body>
</html>
The table isn't showing all of the borders,...
Also....
My H1, P tags etc are all requiring that i set the width to 100% or the eleents below all stack up...
Please let me know how best to correct....
Thank you
Last Comment
LZ1
What browser are you using? I couldn't find anything wrong with the code above at all. Looked good in IE 7, 8 and FF.
About the table not showing showing all borders: Do you mean the borders around the table headers (<th>)? If so, you'll have to add a style for them, because there currently is none defined.
ASKER
IE9 & Firefox and safari...
Also what about the floating H1 , P elements..
Thanks LZ1
Also what about the floating H1 , P elements..
Thanks LZ1
If your elements are requiring a width, then just clear your floats. Always make sure to clear your floats.
So on your <h1>Heading</h1> You'l want to add clear:both; to the CSS.
So on your <h1>Heading</h1> You'l want to add clear:both; to the CSS.
ASKER
Thanks,
my TR TH background image is 796px wide, but it is not inline with the table see here...
Should I change the width, I'm confused..
Thanks
my TR TH background image is 796px wide, but it is not inline with the table see here...
Should I change the width, I'm confused..
Thanks
Can you send a screenshot of what your seeing? It looks fine to me, however I'm not sure what it looks like or what it is supposed to look like.
ASKER
sure here you go,..
the righthand of the table head bar ..
the righthand of the table head bar ..
ASKER CERTIFIED SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
ah I see thank you
ASKER
LZ1 one last question..
HTML5 CSS3 ... re they backwards compatiable...
will they display correctly in IE6? IE7, IE8 etc
thank you
HTML5 CSS3 ... re they backwards compatiable...
will they display correctly in IE6? IE7, IE8 etc
thank you
For HTML 5 and CSS 3 in older versions of IE, you'll probably have to call a few JS files in order to make them obey.
http://net.tutsplus.com/tutorials/html-css-techniques/html5-and-css3-without-guilt/
http://net.tutsplus.com/tutorials/html-css-techniques/html5-and-css3-without-guilt/
ASKER
Thank you
ASKER
What about older versions of FF, safari etc
This may sound wrong, but most users who have FF or Safari are relatively up to date. At least to the versions that will implement CSS3 and HTML5. I'm not trying to say don't worry about it, but with those particular users, you should be fine.
ASKER
Thank you :)
ASKER
according to my figures .. only 5.18% are still on IE6 - thankfully :)
Yes! Thankfully.
ASP
Active Server Pages (ASP) is Microsoft’s first server-side engine for dynamic web pages. ASP’s support of the Component Object Model (COM) enables it to access and use compiled libraries such as DLLs. It has been superseded by ASP.NET, but will be supported by Internet Information Services (IIS) through at least 2022.
82K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
TRUSTED BY
