Jump to content

[SOLVED] problem with template

curt22

By curt22
in HTML Help

 Share

Recommended Posts

curt22 Member

curt22

Posted
Posted

I found this free xhtml template and i really like it but it does not work right in IE it only works in firefox and I don't know enough html to fix it. Could someone tell me what's wrong with it. The problem is that in ie7 half of the text gets cut off.

This is the template

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Rounded Two | Home</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="wrapper">
	<div id="top">
	</div>
	<div id="content">
		<div id="header">
		Your Logo Here
		</div>
		<div id="menu">
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">Link</a></li>
				<li><a href="#">Linker</a></li>
				<li><a href="#">Linked</a></li>
				<li><a href="#">Linky</a></li>
				<li><a href="#">Linkin Log</a></li>
			</ul>
		</div>
		<div id="stuff">
		Just another version of Rounded
		<br /><br />
		I have tested this template with IE7 and Firefox, and it works just fine with both. Some of the image properties will not show up as well in IE6, but other than that, it works in IE6 as well.
		<br /><br />
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
		nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut 
		wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
		lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure 
		dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore 
		eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui 
		blandit praesent luptatum zzril delenit. 
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
		nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut 
		wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
		lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure 
		dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore 
		eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui 
		blandit praesent luptatum zzril delenit. 
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
		nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut 
		wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
		lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure 
		dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore 
		eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui 
		blandit praesent luptatum zzril delenit. 
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
		nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut 
		wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
		lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure 
		dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore 
		eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui 
		blandit praesent luptatum zzril delenit. 
		<br /><br />
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
		nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut 
		wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
		lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure 
		dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore 
		eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui 
		blandit praesent luptatum zzril delenit. 
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
		nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut 
		wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
		lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure 
		dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore 
		eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui 
		blandit praesent luptatum zzril delenit. 
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
		nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut 
		wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
		lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure 
		dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore 
		eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui 
		blandit praesent luptatum zzril delenit. 
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
		nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut 
		wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
		lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure 
		dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore 
		eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui 
		blandit praesent luptatum zzril delenit. 
		<br /><br />
		<a href="http://validator.w3.org/check?uri=referer"><img
		src="http://www.w3.org/Icons/valid-xhtml10"
		alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
		</div>
	</div>
	<div id="bottom">
	</div>
</div>
</body>
</html>

This is the css

/**************************************************/
/*                                   Body and Wrapper                             */
/**************************************************/

body {
background: #000099 url(images/back.png) top center repeat-x; 
margin: 0;
padding: 0;
font: normal 8pt/13pt verdana, arial,sans-serif;
}

#wrapper {
margin: 0 auto;
width: 800px;
padding: 0;
text-align: left;
}

/**************************************************/
/*                                       Top Piece                                        */
/**************************************************/

#top {
background: url(images/bgtop.png) top center no-repeat; 
width: 800px;
height: 78px;
}

/**************************************************/
/*                                       Content                                             
another wrapper that holds all the content                              */
/**************************************************/

#content {
background: url(images/bgmiddle.png) center repeat-y; 
width: 766px;
height: 100%;
padding: 0px 17px 0px 17px;
}

/**************************************************/
/*                               All the content                                        */
/**************************************************/

#header {
background: url(images/header.png) top center no-repeat; 
width: 746px;
height: 106px;
margin: 0px 0px 10px 0px;
padding: 60px 0px 0px 20px;
color: white;
font-size: 50px;
text-align: ;
}
/*                    Menu                   */
#menu {
width: 200px;
height: 100%;
margin-left: 10px;
float: left;
text-align: left;
}

#menu li a {
height: 37px;
voice-family: "\"}\""; 
voice-family: inherit;
height: 29px;
text-decoration: none;
text-align: left;
}	

#menu li a:link, #menu li a:visited {
color: navy;
display: block;
background:  url(images/off.png) top center no-repeat;
padding: 8px 0 0 10px;
height: 29px;
text-align: left;
}

#menu li a:hover {
color: blue;
background:  url(images/on.png) top center no-repeat;
padding: 8px 0 0 10px;
height: 29px;
text-align: left;
}	

ul {
list-style: none;
margin: 0;
padding: 0;
text-align: left;
}

#stuff {
background:  url(images/texttop.png) top left no-repeat;
width: 520px;
margin: 0px 0px 0px 220px;
padding-top: 55px;
border: 2px navy;
}

img {
border: none;
} 

/**************************************************/
/*                                       Bottom                                             */
/**************************************************/

#bottom {
background: url(images/bgbottom.png) bottom center no-repeat; 
width: 800px;
height: 50px;
}

Link to comment
Share on other sites
matthewhaworth Member

matthewhaworth

Posted
Posted

The offending tag is in the body properties:

 

body {
background: #000099 url(images/back.png) top center repeat-x; 
margin: 0;
padding: 0;
font: normal 8pt/13pt verdana, arial,sans-serif; /* THE 8pt/13pt IS THE PROBLEM */
}

 

I'd make it 13pt, or .. 10pt cos 13pt looks too big, then I'd put whatever needs to be 13pt in a p tag wherever it needs to be bigger.

 

p#biggertext { font-size: 13pt; }

Link to comment
Share on other sites
curt22 Member

curt22

Posted
  • Author
Posted

Thanks matthewhaworth, but I fixed it before you posted I just didn't ha dent post it here yet. This problem was in #header  to fix it I changed the code to this:

background: url(images/header.png) top center no-repeat;
width: 746px;
height: 66px;
margin: 0px 0px 10px 0px;
padding: 60px 0px 40px 20px;
color: white;
font-size: 50px;
text-align: ;

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.