Forums > wordpress layout catastrophe

Full Version: wordpress layout catastrophe

Forums > Resource Center > Graphics Help > Graphics Help Resolved Topics

LuvsDogs387

Dec 15 2005, 12:20 AM

I’m trying to make a layout for wordpress but it isn’t going so well. I’m having a lot of trouble with the style sheet. Take a look and my site which looks ok in IE and totally messed up in Firefox. I really want this to be compatible in both browsers. Can someone please look at my index, style sheet, and site to help me figure out this mess

[Link is in my sig]

what I was trying to do:
get sidebar and content to sit next to each other
have a full page background and a blog background
have a picture header and picture footer
and center the page without centering the text

Any help would be appreciated :)

Style Sheet

<!-- begin code provided by createblog.com --><br />#page {<br />	background-image: url(/wp-content/themes/Greek Getaway/images/gg_40.gif);<br />	width: 847px;<br />	border: 0px solid #000000;<br />	margin: 0px 50px 0px 0px; <br />}<br />#header {<br />	background-color: white;<br />	width: 847px;<br />	height: 417px;<br />	border: 0px solid #000000;<br />}<br />#footer {<br />	width:847px;<br />	height: 97px;<br />	border: 0px solid #000000;<br />	text-align: center;<br />	background-image: url(/wp-content/themes/Greek Getaway/images/gg_42.gif);<br />	padding: 0px 0px 0px 0px;<br />}<br />#sidebar{<br />	float: left;<br />	width: 170px;<br />	padding-left:60px;<br />	border: 0px solid #000000;<br />}<br />#content {<br />	float: right;<br />	width: 490px;<br />	padding-left:30px;<br />	border: 0px solid #000000;<br />}<br />BODY {<br />    color: #000000; <br />	font-size: 10pt; <br />	line-height: 10pt; <br />	font-family: Arial Narrow, sans serif;<br />	text-align: justify; <br />	letter-spacing: 0pt; <br />	margin: 0px;<br />	background-image: url(/wp-content/themes/Greek Getaway/images/gg_13.gif);<br />	background-repeat: repeat; <br />	background-color:#CCCCCC;<br />	cursor: crosshair;<br />}<br />A:link, A:visited, A:active {<br />	font-size: 10pt; <br />	line-height: 10pt; <br />	font-family: Arial Narrow, sans serif; <br />	letter-spacing: 0pt;<br />    text-decoration: underline;<br />	color: #666666;<br />}<br />A:hover {<br />	font-size: 10pt; <br />	line-height: 10pt; <br />	font-family: Arial Narrow, sans serif; <br />	letter-spacing: 0pt;<br />    text-decoration: underline;<br />	color: #FFFFFF;<br />	cursor: nw-resize;<br />}<br />input, textarea, select { <br />	font-size: 10pt;<br />	line-height: 10pt;<br />	background-color: #CCCCCC; <br />	color: #000000; <br />	border: 1px solid #FFFFFF; <br />	font-family: Arial Narrow, sans serif;<br />}<br />li.newbullet {<br />	list-style-image:url(/images/bullet.gif)<br />}<br />IMG {<br />	BORDER: 0px; <br />	margin: 0px;<br />}<br />TD {<br />    color: #000000; <br />	text-align: justify; <br />	font-size: 10pt; <br />	line-height: 10pt; <br />	font-family: Arial Narrow, sans serif; <br />	letter-spacing: 0pt;<br />	text-decoration: none;<br />}<br />B, U, I {<br />	COLOR: #6666CC; <br />	FONT-SIZE: 10pt; <br />	LINE-HEIGHT: 10pt; <br />	FONT-FAMILY: Arial Narrow, sans serif; <br />}<br />#navigation ul { <br />	margin: 0;<br />	width: 170px; <br />	font: bold 10px Arial Narrow, sans serif;<br />	list-style: none; <br />	padding : 0px;<br />} <br />#navigation ul li { <br />	margin: 0; <br />	padding: 0; <br />	text-align: left; <br />	padding : 0px;<br />}<br />#navigation ul li a {<br />	display: block; <br />	width: 170px; <br />	height: 15px;<br />	line-height: 15px;<br />	padding : 0px;<br />}<br />#navigation ul li a {<br />	display: block; <br />	width: 170px; <br />	height: 15px;<br />	line-height: 15px;<br />	color: #ffffff; <br />	font-weight: bold;<br />	padding : 0px;<br />}<br />#navigation a:link, #navigation a:visited {<br />	background-color: #transparent; <br />} <br />#navigation a:hover, #navigation a:active {<br />	background-color: #CCCCCC;<br />}<br />#navigation ul li a {<br />	display: block; <br />	width: 170px; <br />	height: 15px;<br />	line-height: 15px;<br />	color: #ffffff; <br />	font-weight: bold;<br />	border-bottom: solid 1px #FFFFFF;<br />	text-decoration: none;<br />	padding : 0px;<br />} <br />.h1 {<br />	font-family: Arial Narrow, sans serif; <br />	font-family: 10pt; <br />	line-height: 12pt; <br />	text-align: center;<br />	color: #FFFFFF;<br />	background-color: #CCCCCC;<br />	border-bottom: 2px solid #6666CC;<br />	margin: 0px 0px 0px 0px;<br />}<br /><!-- end code provided by createblog.com -->

Index

<!-- begin code provided by createblog.com --><br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><br /><head profile="http://gmpg.org/xfn/11"><br />	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><br />	<title>LivinADaydream.com</title><br />	<meta name="generator" content="WordPress 1.5.2" /> <!-- leave this for stats please --><br />	<style type="text/css" media="screen"><br />	@import url( http://livinadaydream.com/wp-content/themes/Greek Getaway/style.css );<br />	</style><br />	<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://livinadaydream.com/?feed=rss2" /><br /><br />	<link rel="alternate" type="text/xml" title="RSS .92" href="http://livinadaydream.com/?feed=rss" /><br />	<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="http://livinadaydream.com/?feed=atom" /><br />	<link rel="pingback" href="http://livinadaydream.com/xmlrpc.php" /><br />    	<link rel='archives' title='December 2005' href='http://livinadaydream.com/?m=200512' /><br />  </head><br /><br /><body><br /><br /><div id="page"><br /><br />	<div id="header"><br /><br />	<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0><br />	<TR><TD colspan="2"><IMG SRC="/wp-content/themes/Greek Getaway/images/gg_02.gif" WIDTH=847 HEIGHT=141></TD></TR><br />	<TR><TD colspan="2"><IMG SRC="/wp-content/themes/Greek Getaway/images/gg_04.gif" WIDTH=847 HEIGHT=128></TD></TR><br />	<TR><TD colspan="2"><IMG SRC="/wp-content/themes/Greek Getaway/images/gg_05.gif" WIDTH=847 HEIGHT=148></TD></TR><br />	</TABLE><br />	</div><br /><br />	<div id="sidebar"><br />	<!-- begin sidebar --><br /><br /><div id="sidebar"><br /><br />    Categories:  <li><a href="http://livinadaydream.com/?cat=2" title="View all posts filed under Update">Update</a><br /></li><br />	<li><a href="http://livinadaydream.com/?cat=4" title="View all posts filed under Rant">Rant</a><br /></li><br />	Search:	<br />	<form id="searchform" method="get" action="/index.php"><br />	<div><br />  <input type="text" name="s" id="s" size="15" /><br /><br /><br />  <input type="submit" value="Search" /><br />	</div><br />	</form><br />	Themes: <ul id="themeswitcher"><br />       <li>Greek Getaway</li><br />       <li><a href="http://livinadaydream.com/index.php?wptheme=WordPress+Classic">WordPress Classic</a></li><br />       <li><a href="http://livinadaydream.com/index.php?wptheme=WordPress+Default">WordPress Default</a></li><br /><br /></ul> </li><br /><br />	Archives:  <li><a href='http://livinadaydream.com/?m=200512' title='December 2005'>December 2005</a></li><br />	Meta:	<br />  <a href="http://livinadaydream.com/wp-login.php">Login</a>	<a href="feed:http://livinadaydream.com/?feed=rss2" title="Syndicate this site using RSS"><abbr title="Really Simple Syndication">RSS</abbr></a><br />	<a href="feed:http://livinadaydream.com/?feed=comments-rss2" title="The latest comments to all posts in RSS">Comments <abbr title="Really Simple Syndication">RSS</abbr></a><br /><br />	<a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a><br />	<a href="http://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a><br />	<a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform."><abbr title="WordPress">WP</abbr></a><br /><br /><br />  <img src="/images/ggruthann.gif" align="right"><br><br />  Turned 18 on Nov 3. Is sarcastic and funny. Likes telling jokes and stories. <br />  Addicted to movies, music, and the internet. Loves Blink-182, Snoopy, and Starbucks. <br />  <A HREF="/me/biography.php">More?</A><br /><br />  <br><br><br />  <br />  <img src="/images/ggMenu.gif" align="right"><br><br><br />  <div id="navigation"><br />  <ul><br />  <li><a title="blog" href="/">Blog</a></li><br />  <li><a title="plug" href="/plugboard/index.php">Plug Board</a></li><br />  <li><a title="me" href="/me/me.php">Me</a></li><br /><br />  <li><a title="guest" href="/visitor/visitor.php">Guest</a></li><br />  <li><a title="domain" href="/domain/domain.php">Domain</a></li><br />  </ul><br />  </div><br><br /><br />  <img src="/images/ggvote.gif" align="right"><br><br><br />  <center>	<br />  <a href="http://www.createblog.com/topsite/in.php?id=1871" target="_blank"><img src="/images/createblog.bmp" border="0" /></a> <br />  <a href="http://foreverbliss.org/topsites/in.php?site=1129231155" target="_blank"><img src="/images/foreverbliss.gif"></a> <br />  </center><br /><br />  <br><br /><br />  <img src="/images/ggloved.gif" align="right"><br><br><br />  <center><br />  <a href="http://www.acid-candy.org/chassylicious/" target="_blank"><img src="/images/affiliates/chasity.gif"border="0"alt="acid-candy.org/chassylicious"></a> <br />  <a href="http://www.oxnerds.com/" target="_blank"><img src="/images/affiliates/lily.gif"border="0"alt="oxnerds.com"></a> <br />  <a href="http://vibrance.foreverbliss.org/" target="_blank"><img src="/images/affiliates/toya.gif"border="0"alt="vibrance.foreverbliss.org"></a> <br />  <a href="http://unveiled.madpage.com/" target="_blank"><img src="/images/affiliates/huichin.gif"border="0"alt="unveiled.madpage.com"></a> <br />  <a href="http://true.sad-excuses.net/" target="_blank"><img src="/images/affiliates/courtney.gif"border="0"alt="true.sad-excuses.net"></a> <br />  <a href="http://www.meowzers.net/hoyee/main.php" target="_blank"><img src="/images/affiliates/hoyee.gif"border="0"alt="meowzers.net/hoyee"></a> <br />  <br><A HREF="/domain/affiliates.php">Apply</A><br />  </center><br /><br />  <br><br /><br />  <img src="/images/gglinkage.gif" align="right"><br><br><br><br />  <center><br />  <img src="/images/linkme7.gif"></a><br><br />  <a href="/domain/linkme.php">More?</a><br><br />  <a href="http://wholinkstome.com/" title="Click here to see who's linking to this site.  Powered by WhoLinksToMe.com." target="_blank">Who Links Here?</a><br />  </center><br /><br />  <br><br /><br />  <img src="/images/ggetc.gif" align="right"><br><br><br />  <br />  <center><br />  	<!-- OKcounter Code Start --><br />  <script src=http://fastonlineusers.com/online.php?d=www.livinadaydream.com></script> online<br><br />  <a href=http://okcounter.com/en_status.html?id=577532> <br />  <img src=http://okcounter.com/count.html?id=577532 border=0></a> <br><br /><br />  <!-- sparkly rotation code begin --><br />  <iframe src="http://rotation.sparkly.nu/work.php?ID=ruthann" width="88" height="31" marginwidth="0" marginheight="0" frameborder="0" scrolling="no"></iframe><br/><br />  <a href="http://rotation.sparkly.nu" title="sparkly rotation"><img src="http://rotation.sparkly.nu/images/ncode1.gif" border="0"></a><br><br />  <!-- sparkly rotation code end --><br />  <br />  <!-- kawaiiness.xchng begin --><br />  <center><script language="JavaScript" type="text/javascript" src="http://kawaiiness.com/rotation_work.php?ID=ruthann" target="_blank"></script></center><br />  <!-- kawaiiness.xchng end --><br /><br />  <br />  <!-- so-you button exchange code begin --><br />  <CENTER><br />  <IFRAME SRC="http://so-you.net/rotation/work.php?ID=ruthann" width=94 height=45 marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=0 scrolling="no" allowTransparency="true" target="_blank"></IFRAME><br />  </CENTER><br />  <!-- so-you button exchange code end --><br /><br />  <!-- Vinyl Sky Rotation begin --><br />  <iframe src="http://vinyl-sky.org/rotation/script/work.php?ID=ruthann" width="88" height="31" marginwidth="0" marginheight="0" frameborder="0" scrolling="no"<br />    ></iframe><br /><br /><br />  <a href="http://vinyl-sky.org/rotation" target="_blank"><img src="http://i7.photobucket.com/albums/y269/vinylsky/baner.gif" border="0" alt="VS Rotation" /></a><br />  <!-- Vinyl Sky Rotation end --><br />  </center>	</div><br /><br />	<div id="content"><br /><br /><div class="h1">December 14, 2005</div>	<br /><div class="post" id="post-6"><br />  <a href="http://livinadaydream.com/?p=6" rel="bookmark">why?</a><br /><br />	<div class="meta">Filed under: <a href="http://livinadaydream.com/?cat=4" title="View all posts in Rant" rel="category tag">Rant</a> — Ruthann @ 8:31 am </div><br />	<br />	<div class="storycontent"><br />  	<p>damn you mark and tom.<br /></p><br />	</div><br />	<br />	<div class="feedback"><br />                        <a href="http://livinadaydream.com/?p=6#comments">Comments (1)</a>	</div><br /><br /></div><br /><br /><br /><br /><div class="h1">December 10, 2005</div>	<br /><div class="post" id="post-1"><br />  <a href="http://livinadaydream.com/?p=1" rel="bookmark">New Site</a><br />	<div class="meta">Filed under: <a href="http://livinadaydream.com/?cat=2" title="View all posts in Update" rel="category tag">Update</a> — Ruthann @ 11:39 pm </div><br /><br />	<br />	<div class="storycontent"><br />  	<p>Hi, if you’ve been here before or if your a new visitor I’d just like to let you know I’m redoing my entire site.  My previous code was very scrambled and I always had to edit many pages every time I updated. So now I’m going to take almost everything down and start anew; something I’ve wanted to do for a long time. </p><br />	<p>[edit] Dec 12th: I know things still look distorted but I’m working on it. [/edit]<br /></p><br />	</div><br />	<br />	<div class="feedback"><br /><br />                        <a href="http://livinadaydream.com/?p=1#comments">Comments (0)</a>	</div><br /><br /></div><br /><br /><br /><br /><br />	</div><br />	<br />	<div id="footer"><br />	<center>Powered by Wordpress</center><br /><br />	</div><br /><br /></div><br /></body><br /></html><br /><!-- end code provided by createblog.com -->

Libertie

Dec 15 2005, 12:34 AM

Hmm. Either you're really fast or you're seeing things, because I don't see any difference when viewing from Firefox and IE. :P Looks fine to me.

edit// Well, now when I change themes I'm seeing that the text isn't formatted for FF. Is that what you meant?

Stephire

Dec 15 2005, 12:35 AM

=o!
You don't have to do all that!
Go ahead and make your own style sheet and layout, then save them.
Then refer to this tutorial: http://bouncy-bubbles.net/tutorials/wp-themes.php
It also looks the same to me. Xp

LuvsDogs387

Dec 15 2005, 03:09 AM

I'll look at the tutorial later (its late right now) but this is what I see in both of my browsers

Screenshots were taken just now.

IE:

Firefox:

on both of them the blog is under the navigation.

megumint

Dec 20 2005, 03:29 PM

GAAAH! You have tables? And the <center> tag! I'm going to die.

....

Okay, I'm back.
Get rid of the tables and all that extra coding.. such as border: 0px 0px #00000
If you put border:0, I'm sure it knows not to put a black border.

Why would the header even have a border?
Hm.

Anyway.

Next, you should use some absolute positioning to get what you want. Yeah!

And Firefox is.. well. I've found it easier to code in Firefox first, then use random overrides to make it work in IE. Such as body > whatever

But.. with IE 7, they said not to do that anymore. I forgot what exactly they said to do. It was something like [ifIE7something]

Sigh. I know I didn't give you that many answers, but.. Gah. I can't do everything, can I?

Anyway. Google that stuff. And.. stuff.

Maybe find a basic layout for what you want, then just stick in the images in the spaces provided. There are tons of sites like that.

LuvsDogs387

Dec 20 2005, 04:00 PM

Hey thanks that helps a lot!!!

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.