CSS Creator Cutting off text and wrong colour links

Posted: Tue, 2008-05-13 10:08

Hi,

I currently have a layout where the text gets cut off (see the text with ggg) - what do I need to change in the style sheet to stop this?

Also the link (top left) goes purple (Us and our service) and I want the links to stay the same colour as they are original (Pricing / testing). What should I do to stop the links going purple?

Thanks

Hers the css style sheet code:

/* CSS Document */
body{padding:0; margin:0;  0 0 repeat-x #FCFAE6; font:14px/20px Arial, Helvetica, sans-serif; color:#3D3C2C; font-weight:normal;}
div, p, h1, h2, h3, ul, img{padding:0px; margin:0px;}
ul{list-style-type:none;}

/* TOP PANEL */
#topPan{width:778px; height:90px; position:relative; margin:0 auto; padding:0;}
#topPan img{width:247px; height:87px; display:block; padding:23px 0 0 6px;}
/* Menu Panel */
#topPan ul{width:520px; height:96px; display:block; position:absolute; top:0px; right:9px; margin:0; padding:0;}
#topPan ul li{float:left; width:104px; display:block; text-align:center;}
#topPan ul li a{width:104px; height:35px; display:block; font:14px/14px "Trebuchet MS",Arial, Helvetica, sans-serif; color:#2E4E00; 0 0 repeat-x #F4F1DD; text-decoration:none; margin:0; padding:100px 0 0 0; }
#topPan ul li a:hover{ width:104px; height:96px; display:block; background:#FCFAE6; color:#2E4E00; text-decoration:none;}
#topPan ul li span{width:104px; height:35px; display:block; background:url(images/menu-devider1.gif) 100% 0 no-repeat #FCFAE6; color:#2E4E00; text-decoration:none; padding:61px 0 0 0; line-height:14px;}

/* /TOP PANEL */

/* HEADER PANEL */
#headerPan{width:778px; height:290px; position:relative; margin:0 auto; padding:0;}
#headerPan h1{width:526px; height:236px; position:absolute; top:35px; right:0px; background:url(images/example.gif) 0 0 no-repeat #FCFAE6; color:#fff; font-size:36px; line-height:18px; text-transform:uppercase; text-indent:-2000px;}
#headerPanleft{
	width:237px;
	height:214px;
	position:absolute;
	top:48px;
	left:9px;
	text-decoration: none;
}
a:link {
	text-decoration: none;
	color: 003366;
}
a:active {
	text-decoration: none;
	color: 003366;
}
a:visited {
	text-decoration: none;
	color: 003366;
}
a:hover {
	text-decoration: none;
}

#headerPan #ourblog{ float:left; width:237px; height:62px; position:relative; margin:0 auto; background:url(images/icon1-nor.gif) 0 0 no-repeat;}
#headerPan #ourblog h2{width:140px; height:10px; background:#fff; display:block; position:absolute; left:0px; top:0px; margin:14px 0 5px 73px; font:16px/14px Georgia, "Trebuchet MS",Arial, Helvetica, sans-serif; color:#003366; z-index:1; text-transform:uppercase;}
#headerPan #ourblog p{width:103px; height:10px; display:block; position:absolute; font:12px/14px "Trebuchet MS",Arial, Helvetica, sans-serif; color:#2E5000; background:#fff; margin:34px 0 0 73px; z-index:1; }
#headerPan #ourblog a{text-decoration:none; display:block; width:237px; height:62px;}
#headerPan #ourblog a:hover{text-decoration:none;}

#headerPan #possib{ float:left; width:237px; height:62px; position:relative; margin:13px 0 0 0; background:url(images/icon2-nor.gif) 0 0 no-repeat;}
#headerPan #possib h2{width:130px; height:10px; background:#fff; display:block; position:absolute; left:0px; top:0px; margin:14px 0 5px 73px; font:16px/14px Georgia, "Trebuchet MS",Arial, Helvetica, sans-serif; color:#003366; z-index:1; text-transform:uppercase;}
#headerPan #possib p{width:130px; height:10px; display:block; position:absolute; font:12px/14px "Trebuchet MS",Arial, Helvetica, sans-serif; color:#2E5000; background:#fff; margin:34px 0 0 73px; z-index:1; }
#headerPan #possib a{text-decoration:none; display:block; width:237px; height:62px;}
#headerPan #possib a:hover{text-decoration:none; background:url(images/icon2-hover.gif) no-repeat 0 0;}

#headerPan #solution{ float:left; width:237px; height:62px; position:relative; margin:13px 0 0 0; background:url(images/icon3-nor.gif) 0 0 no-repeat;}
#headerPan #solution h2{width:130px; height:1px; background:#fff; display:block; position:absolute; left:0px; top:0px; margin:14px 0 5px 73px; font:16px/14px Georgia, "Trebuchet MS",Arial, Helvetica, sans-serif; color:#003366; z-index:1; text-transform:uppercase;}
#headerPan #solution p{width:130px; height:10px; display:block; position:absolute; font:12px/14px "Trebuchet MS",Arial, Helvetica, sans-serif; color:#2E5000; background:#fff; margin:34px 0 0 73px; z-index:1; }
#headerPan #solution a{text-decoration:none; display:block; width:237px; height:62px;}
#headerPan #solution a:hover{text-decoration:none; background:url(images/icon3-hover.gif) no-repeat 0 0;}



/* BODY PANEL */
#bodyPan{width:778px; height:1000px; position:relative; margin:0 auto; padding:0;}
/*Left Panel */
#leftPan{width:239px; height:611px; position:absolute; top:0px; left:8px; margin:0; padding:0px;}
#leftmemberPan{width:237px; height:600px; position:relative; margin:0 auto; padding:0; border:1px solid #DCDAC2; background:#fff; color:#000;}
#leftmemberPan h2{height:48px; background:url(images/symbol4.gif) 0 0 no-repeat #fff; display:block; position:relative; padding:0 0 0 57px; margin:12px 0 20px 13px; font:16px/48px  Georgia, color:#5EA000; text-transform:uppercase;}
#leftmemberPan h2 span{background:#fff; color:#3D3C2C;}
#leftPan form{width:220px; height:108px; background:#EBE9D7; padding:0; margin:0 0 0 8px; color:#333227;}
#leftPan form label{width:72px; display:block; float:left; padding:14px 15px 0 16px; }
#leftPan form label.emailpadding{padding:2px 15px 0 16px;}
#leftPan form input{ float:left; display:block; width:101px; height:16px; margin:14px 0 9px 0}
#leftPan form input.fieldpadding{margin:2px 0 9px 0}
#leftPan h3{height:48px; background:#ffffff; display:block; float:right; padding:0 0 0 57px; margin:12px 0 22px 13px; font:28px/48px Georgia, "Trebuchet MS",Arial, Helvetica, sans-serif; color:#003366;}
#leftPan ul{ display:block; float:right; width:262px; height:327px;}
#leftPan ul li{140px 10px no-repeat; padding:0px 20px 0 0; text-align:right;} 
#leftPan ul li a{text-decoration:none; color:#3D3C2C; background:#ffffff;}
#leftPan ul li a:hover{text-decoration:none;}

#leftPango{width:220px; height:25px; position:absolute; top:160px; left:8px; border-top:1px solid #fff; background:#B0AD93; display:block; padding:0; margin:0; font-size:12px; color:#FFFFFA; line-height:23px; font-weight:bold;}
#leftPango p.textposition a{float:left; padding:0 0 0 20px; margin:0; text-decoration:none; color:#FFFFFA; background:#B0AD93;}
#leftPango p.textposition a:hover{text-decoration:underline; background:none;}
#leftPan form input.gobutton{float:right; background:url(images/arrow4.gif) no-repeat 30px 0 #63614F; border:none; width:45px; height:21px; display:block; margin:2px 0 0 0; padding:0 0 0 5px; text-decoration:none; color:#fff; font:14px/21px "Trebuchet MS",Arial, Helvetica, sans-serif; text-transform:uppercase; text-align:left;}
#leftPango a:hover{background:url(images/arrow4.gif) no-repeat 30px 1px #333229; text-decoration:none; color:#fff;}

/*/Left Panel */
/*Right Panel */
#rightPan{width:504px; height:1000px; position:absolute; top:0px; right:10px; border:1px solid #DCDAC2; background:; color:#3D3C2C;}
#rightPan2{width:504px; height:1000px; position:absolute; top:0px; right:10px; border:1px solid #DCDAC2; background:; color:#3D3C2C;}
#rightbodyPan{
	width:484px;
	height:900px;
	position:absolute;
	top:10px;
	left:10px;
	background:;
	color:#3D3C2C;
	background-color:;
}
#rightbodyPan h2{width:210px; height:55px; display:block; position: relative; background:url(images/symbol5.gif) no-repeat #ffffff; padding:35px 0 0 70px; font:28px/28px Georgia, "Trebuchet MS",Arial, Helvetica, sans-serif; color:#003366; margin:0px 0 7px 20px ;}
#rightbodyPan h5{width:210px; height:55px; display:block; position: relative; background:url(images/symbol4.gif) no-repeat; padding:35px 0 0 70px; font:28px/28px Georgia, "Trebuchet MS",Arial, Helvetica, sans-serif; color:#003366; margin:0px 10px 7px 20px ;}
#rightbodyPan h6{width:210px; height:55px; display:block; position: relative; background:url(images/symbol.gif) no-repeat; padding:35px 0 0 70px; font:28px/28px Georgia, "Trebuchet MS",Arial, Helvetica, sans-serif; color:#003366; margin:0px 0 7px 20px ;}
#rightbodyPan h7{width:210px; height:55px; display:block; position: relative; background:url(images/symbol7.gif) no-repeat #ffffff; padding:35px 0 0 70px; font:28px/28px Georgia, "Trebuchet MS",Arial, Helvetica, sans-serif; color:#003366; margin:0px 0 7px 20px ;}
#rightbodyPan p{padding:0 20px 10px;}
#rightbodyPan p.redtext{background:; color:#003366; font-size:18px; line-height:20px; padding:0 20px 26px;}
#rightbodyPan p span{background:; color:#3D3C2C;}
#rightbodymore{width:306px; height:25px; border:1px solid #fff; background:#B0AD93; display:block; padding:2px; margin:0 60px 0 80px; font-size:12px; color:#FFFFFA; line-height:25px; font-weight:bold;}
#rightbodymore p.textposition{float:left; padding:0 0 0 20px; margin:0;}
#rightbodymore a{float:right; background:url(images/arrow4.gif) no-repeat 58px 1px #63614F; width:66px; display:block; position:relative; margin:1px 0 0 0; padding:0 0 0 10px; height:23px; text-decoration:none; color:#fff; font:14px/23px "Trebuchet MS",Arial, Helvetica, sans-serif; text-transform:uppercase;}
#rightbodymore a:hover{background:url(images/arrow4.gif) no-repeat 58px 1px #333229; text-decoration:none; color:#fff;}
#rightbodyPan h3{width:268px; height:31px; display:block; position: relative; background:url(images/symbol6.gif) 100% 0 no-repeat; padding:24px 0 0 0; font:28px/28px Georgia, "Trebuchet MS",Arial, Helvetica, sans-serif; color:#3D3C2C; margin:27px 0 20px 80px ;}
#rightbodyPan ul{width:328px; height:90px; position:relative; top:0px; left:50px; margin:0 0 0px 0;}
#rightbodyPan li{width:340px; background:url(images/arrow2.gif) 0 7px no-repeat; font:14px/24px Arial, Helvetica, sans-serif; padding:0 0 0 20px;}
#rightbodyPan li a{width:235px; height:60px; background:; color:#CC0000; text-decoration:underline; line-height:24px;}
#rightbodyPan ul li a:hover{width:235px; height:60px;  text-decoration:none; line-height:24px;}

#rightbodymorenext{width:306px; height:25px; border:1px solid #fff; background:#B0AD93; display:block; padding:2px; margin:0 60px 0 80px; font-size:12px; color:#FFFFFA; line-height:25px; font-weight:bold;}
#rightbodymorenext p.textposition{float:left; padding:0 0 0 20px; margin:0;}
#rightbodymorenext a{float:right; background:url(images/arrow4.gif) no-repeat 58px 1px #63614F; width:66px; display:block; position:relative; margin:1px 0 0 0; padding:0 0 0 10px; height:23px; text-decoration:none; color:#fff; font:14px/23px "Trebuchet MS",Arial, Helvetica, sans-serif; text-transform:uppercase;}
#rightbodymorenext a:hover{background:url(images/arrow4.gif) no-repeat 58px 1px #333229; text-decoration:none; color:#fff;}

/* pattestingpage */

#rightPan2{width:504px; height:1400px; position:absolute; top:0px; right:10px; border:1px solid #DCDAC2; background:#fff; color:#3D3C2C;}
#rightbodyPan2{
	width:484px;
	height:1300px;
	position:absolute;
	top:10px;
	left:10px;
	background:#FCFAE6;
	color:#3D3C2C;
	background-color: #FFFFFF;
}
#rightbodyPan2 h2{width:210px; height:55px; display:block; position: relative; background:url(images/symbol5.gif) no-repeat #ffffff; padding:35px 0 0 70px; font:28px/28px Georgia, "Trebuchet MS",Arial, Helvetica, sans-serif; color:#003366; margin:0px 0 7px 20px ;}
#rightbodyPan2 h5{width:210px; height:55px; display:block; position: relative; background:url(images/symbol4.gif) no-repeat #ffffff; padding:35px 0 0 70px; font:28px/28px Georgia, "Trebuchet MS",Arial, Helvetica, sans-serif; color:#003366; margin:0px 0 7px 20px ;}
#rightbodyPan2 h6{width:210px; height:55px; display:block; position: relative; background:url(images/symbol6.gif) no-repeat #ffffff; padding:35px 0 0 70px; font:28px/28px Georgia, "Trebuchet MS",Arial, Helvetica, sans-serif; color:#003366; margin:0px 0 7px 20px ;}
#rightbodyPan2 p{padding:0 20px 10px;}
#rightbodyPan2 p.redtext{background:#ffffff; color:#003366; font-size:18px; line-height:20px; padding:0 20px 26px;}
#rightbodyPan2 p span{background:#FFFFFA; color:#3D3C2C;}
#rightbodymore{width:306px; height:25px; border:1px solid #fff; background:#B0AD93; display:block; padding:2px; margin:0 60px 0 80px; font-size:12px; color:#FFFFFA; line-height:25px; font-weight:bold;}
#rightbodymore p.textposition{float:left; padding:0 0 0 20px; margin:0;}
#rightbodymore a{float:right; background:url(images/arrow4.gif) no-repeat 58px 1px #63614F; width:66px; display:block; position:relative; margin:1px 0 0 0; padding:0 0 0 10px; height:23px; text-decoration:none; color:#fff; font:14px/23px "Trebuchet MS",Arial, Helvetica, sans-serif; text-transform:uppercase;}
#rightbodymore a:hover{background:url(images/arrow4.gif) no-repeat 58px 1px #333229; text-decoration:none; color:#fff;}
#rightbodyPan2 h3{width:268px; height:31px; display:block; position: relative; background:url(images/symbol6.gif) 100% 0 no-repeat #FCFAE6; padding:24px 0 0 0; font:28px/28px Georgia, "Trebuchet MS",Arial, Helvetica, sans-serif; color:#3D3C2C; margin:27px 0 20px 80px ;}
#rightbodyPan2 ul{width:328px; height:90px; position:relative; top:0px; left:50px; margin:0 0 0px 0;}
#rightbodyPan2 li{width:340px; background:url(images/arrow2.gif) 0 7px no-repeat; font:14px/24px Arial, Helvetica, sans-serif; padding:0 0 0 20px;}
#rightbodyPan2 li a{width:235px; height:60px; background:#FCFAE6; color:#CC0000; text-decoration:underline; line-height:24px;}
#rightbodyPan2 ul li a:hover{width:235px; height:60px;  text-decoration:none; line-height:24px;}

#rightbodymorenext{width:306px; height:25px; border:1px solid #fff; background:#B0AD93; display:block; padding:2px; margin:0 60px 0 80px; font-size:12px; color:#FFFFFA; line-height:25px; font-weight:bold;}
#rightbodymorenext p.textposition{float:left; padding:0 0 0 20px; margin:0;}
#rightbodymorenext a{float:right; background:url(images/arrow4.gif) no-repeat 58px 1px #63614F; width:66px; display:block; position:relative; margin:1px 0 0 0; padding:0 0 0 10px; height:23px; text-decoration:none; color:#fff; font:14px/23px "Trebuchet MS",Arial, Helvetica, sans-serif; text-transform:uppercase;}
#rightbodymorenext a:hover{background:url(images/arrow4.gif) no-repeat 58px 1px #333229; text-decoration:none; color:#fff;}

#bodyPan2{width:778px; height:1400px; position:relative; margin:0 auto; padding:0;}

/* /BODY PANEL */

/* FOOTER PANEL */
#footerPan{width:778px; height:231px; position:relative; margin:0 auto; padding:0;}
#footernextPan{width:506px; height:150px; position:absolute; top:0px; right:10px; background:#003366; color:#fff; margin:0;}
#footerPan ul{width:380px; display:block; position:absolute; right:40px; top:33px; }
#footerPan li{float:left; font:12px/15px "Trebuchet MS",Arial, Helvetica, sans-serif; font-weight:normal;}
#footerPan ul li a{padding:0 10px; color:#cccccc; background:#003366; text-decoration:none;}
#footerPan ul li a:hover{text-decoration:underline;}
#footerPan ul li a.padl{padding:0 0 0 14px;}

#footerPan ul.ampmgraphics{
	width:1px;
	background:#003366;
	color:#cccccc;
	display:block;
	position:absolute;
	top:231px;
	right:103px;
	height: 0px;
}
#footerPan ul.ampmgraphics li a{background:#003366; display:block; color:#cccccc; text-decoration:none;}
#footerPan ul.ampmgraphics li a:hover{text-decoration:underline;}

#footerPan p{ background:#003366; margin:90px 50px 0 0; display:block; position:absolute; top:0px; right:40px; color:#cccccc; font:12px/15px "Trebuchet MS",Arial, Helvetica, sans-serif;}
#footerPanhtml{width:64px; height:19px; display:block; position:absolute; top:78px; right:170px;}
#footerPanhtml a{width:59px; height:19px; background:url(images/arrow5.gif) no-repeat 45px 0px #D0CEB8; display:block; position:absolute; top:0px; left:0px; margin:0; padding:0 0 0 5px; border:1px solid #FFFFFA; color:#353427; text-transform:uppercase; text-decoration:none;}
#footerPanhtml a:hover{background:url(images/arrow5.gif) no-repeat 45px 0px #B0AD93; color:#353427; text-decoration:none;}

#footerPancss{width:64px; height:19px; display:block; position:absolute; top:78px; right:89px;}
#footerPancss a{width:59px; height:19px; background:url(images/arrow5.gif) no-repeat 45px 0px #D0CEB8; display:block; position:absolute; top:0px; left:0px; margin:0; padding:0 0 0 5px; border:1px solid #FFFFFA; color:#353427; text-transform:uppercase; text-decoration:none;}
#footerPancss a:hover{background:url(images/arrow5.gif) no-repeat 45px 0px #B0AD93; color:#353427; text-decoration:none;}

and here is the html page (example)

<!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>Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="headerPan">
  <div id="headerPanleft">
    <div id="ourblog">
      <h2><a href="example.html">Us &amp; our service</a> </h2>
      <p>Who are we?  </p>
    </div>
    <div id="possib">
      <h2>Pricing</h2>
      <p>Need a price?  </p>
    </div>
    <div id="solution">
      <h2>testing </h2>
      <p>How to Test ? </p>
       </a> </div>
  </div>
  
  <h1>best Fresh Solutio</h1>
</div>
<div id="bodyPan">
  <div id="leftPan">
    <div id="leftmemberPan"><img src="images/contact.gif" alt="" width="237" height="54" border="0" /></div>
    <h3>Contact us </h3>
   <ul>
      <li></li>
    </ul>
  </div>
  <div id="rightPan">
    <div id="rightbodyPan">
      <h2>Text Cuts ggg </h2>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
    </div>
  </div>
</div>
<div id="footerPan">
  <div id="footernextPan">
    <ul>
      <li></li>
      <li>About us |</li>
      <li>Pricing|</li>
      <li>Testing  |</li>
      <li>Contact Us </li>
    </ul>
  </div>
</div>
</body>
</html>

dream74

newbie

Posts: 4
Joined: 2008-05-13

I have solved the issue with

Posted: Tue, 2008-05-13 14:14

I have solved the issue with the links (missing #'s).

Still can't work out why the text is getting cut off... Puzzled

Anyone have any ideas??

Stomme poes

Enthusiast

Posts: 308
Joined: 2008-02-04
Location: Netherlands

I suspect it has something

Posted: Tue, 2008-05-13 14:25

I suspect it has something to do with the restrictive heights and widths you've set for your various boxes including h2, esp with absolute positioning.

Suppose you made the h2 wider, the text should fit. Although to tell the truth, the HTML and the CSS look like they're repeating themselves too much, and doing too much work-- you might be overthinking this. Think like a lazy web developer: let the DOM and the natural flow of things do as much work for you as possible. Absolutely positioning everything shows you trying to wrestle a web page into a newspaper : ) The web's not print. Let it flow, man.

I'm no expert, but I can fake one on teh Interwebz

Thanks for that but I have

Posted: Tue, 2008-05-13 15:26

Thanks for that but I have tried changing the boxes and the letters that fall lower like 'g' or 'y' etc get cut no matter how wide the box is. I can't figure it out.

Does anyone know what I need to change?

Thanks for looking...this really has me stumped Puzzled

fleabyte

Posts: 6
Joined: 2008-05-13
Location: US

Browser?

Posted: Tue, 2008-05-13 15:51

What browser(s) are you testing with? I've tried IE6 and FF2 and don't see the g's getting cut off.

IE 7 - and the g's get cut

Posted: Tue, 2008-05-13 16:04

IE 7 - and the g's get cut slightly.

Strange. Is it an issue with IE??

Is there anyway I can change the code to stop this?

Try padding bottom of h2

Posted: Tue, 2008-05-13 19:09

Have you tried padding the bottom? I'm waiting for a problem with my VMware to get fixed before I can check IE7, but this is just a thought. I also removed some of the other padding items and put them on the margins:

#rightbodyPan h2{width:210px; height:55px; display:block; position: relative; background:url(images/symbol5.gif) no-repeat #ffffff; font:28px/28px Georgia, "Trebuchet MS",Arial, Helvetica, sans-serif; color:#003366; margin:35px 0 7px 70px ; padding-bottom: 5px;}

Mumfy2008

Posts: 1
Joined: 2008-06-05

I have just encountered this

Posted: Thu, 2008-06-05 12:52

I have just encountered this problem myself and spoke to a work mate who said to put a line height on the li which I have done, had to make the line height 2px bigger then the font in the li but it has worked my g's are no longer cut off in IE7

hope this helps

Cutting off text and wrong colour links