?
Solved

Help Correcting CSS Please

Posted on 2011-10-10
17
Medium Priority
?
213 Views
Last Modified: 2012-05-12
Hello,

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> &gt; <a href="#">breadcrumbs</a> &gt; <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">&nbsp;</th>
          <th scope="col">&nbsp;</th>
          <th scope="col">&nbsp;</th>
          <th scope="col">&nbsp;</th>
          <th scope="col">&nbsp;</th>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
      </table>
      <p>&nbsp;</p>
      <p class="mainparagraph">&nbsp;</p>
      <p>&nbsp;</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>

Open in new window


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
0
Comment
Question by:garethtnash
  • 9
  • 7
17 Comments
 
LVL 30

Expert Comment

by:LZ1
ID: 36943908
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.
0
 
LVL 6

Expert Comment

by:effes
ID: 36943981
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.
0
 

Author Comment

by:garethtnash
ID: 36944000
IE9 & Firefox and safari...

Also what about the floating H1 , P elements..

Thanks LZ1
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 30

Expert Comment

by:LZ1
ID: 36944041
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.
0
 

Author Comment

by:garethtnash
ID: 36944103
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
0
 
LVL 30

Expert Comment

by:LZ1
ID: 36944115
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.
0
 

Author Comment

by:garethtnash
ID: 36944149
sure here you go,..

the righthand of the table head bar .. unneat join
0
 
LVL 30

Accepted Solution

by:
LZ1 earned 2000 total points
ID: 36944208
That is happening because of the 1px border on the rows below.  Your only option would be to remove that border on the right/left of those rows. Or you could use a border-left and border-right for the top row of the same color as your bg.
0
 

Author Comment

by:garethtnash
ID: 36944258
ah I see thank you
0
 

Author Comment

by:garethtnash
ID: 36944328
LZ1 one last question..

HTML5 CSS3 ... re they backwards compatiable...

will they display correctly in IE6? IE7, IE8 etc

thank you
0
 
LVL 30

Expert Comment

by:LZ1
ID: 36944341
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/
0
 

Author Comment

by:garethtnash
ID: 36944353
Thank you
0
 

Author Comment

by:garethtnash
ID: 36944357
What about older versions of FF, safari etc
0
 
LVL 30

Expert Comment

by:LZ1
ID: 36944377
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.
0
 

Author Comment

by:garethtnash
ID: 36944390
Thank you :)
0
 

Author Comment

by:garethtnash
ID: 36944392
according to my figures .. only 5.18% are still on IE6 - thankfully :)
0
 
LVL 30

Expert Comment

by:LZ1
ID: 36944400
Yes! Thankfully.
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Suggested Courses

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question