Website not displaying properly

  • nickelbert

    (@nickelbert)


    16 years, 6 months ago

    Here is my website: http://nickhiebert.com (please check this in the latest firefox, safari and google chrome)

    Okay to break it down. On my 1280×800 resolution screen my website displays perfectly. But when you zoom in or not (ctrl + & – or ctrl scroll with mouse wheel) my website blows up everything gets really wide and nothing is viewed properly. For an example lets say go to NBA.com and do that zoom in and out and everything stays in place. Here is my css code:

    /*
Theme Name: Nick's Portfolio
Description: Nick Hiebert 2009 Blog Design
Author: Nick Hiebert
Author URL: http://nickhiebert.com/
*/

/* SIDEBAR */

#sidebar {
	float: left;
	width: 314px;
	padding-bottom: 100px;
	color: #231f20;
	padding-left: 30px;
	margin-left: 10px;
	margin-top: 10px;
}

#sidebar h3 {
	color: #bab8b8;
	font-size: 18px;
	margin-right: 312px;
	margin-left: -25px;
	padding-right: 20px;
	padding-left: 41px;
	position: relative;
}

#searchform {
	float: left;
	width: 235px;
	padding-left: 45px;
	margin-right: 60px;
}

#sidebar a {
	color: #231f20;
	line-height: 1.5em;
	position: relative;
	margin-right: 5px;
	margin-left: -25px;
}

#sidebar a:hover {
	color: #bab8b8;
}

/* END SIDEBAR */

/* BODY */

html {
	background: url(http://nickhiebert.com/wp-content/themes/portfolio/images/background.png) scroll;
}

body {
	text-align: left;
	font-size: 100%;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	color: #999999;
	background: url(http://nickhiebert.com/wp-content/themes/portfolio/images/mainBG.png) repeat-y;
	margin-right: 128.2px;
	margin-left: 137.2px;
	margin-bottom: -18px;
	background-position:center;
}

body h1 a{
	float: left;
	padding-left: 60px;
	padding-top: 9px;
	width: 260px;
}

body h2 a {
	color:#000000;
}

a {
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

p {
	color: #333333;
	line-height: 20px;
	margin-right: -20px;
}

h1 {
	float: left;
	margin-top: 0;
	border: none;
	width: 260px;
	margin-left: 0;
}

img {
	border-style: none;
	margin-left: -46.5px;
	float: left;
	margin-top: -9px;
}

h2 {
	font-size: 25px;
	margin-right: 45px;
	overflow: hidden;
}

#container {
	width: 973px;
	margin: auto;
	text-align: left;
}

/* END BODY */

/* HEADER */

#header h1 a{
	float: left;
	margin-right: 312px;
	width: 260px;
}

/* END HEADER */

/* NAVIGATION */

#nav {
	background: url(http://nickhiebert.com/wp-content/themes/portfolio/images/nav_bg.png) repeat-x;
	overflow: hidden;
	height: 93px;
	margin-right: 12.5px;
	margin-left: -71px;
	padding: 0 0 0 31px;
}

#nav li {
	float: right;
	line-height: 93px;
	padding-left: 5px;
	padding-right: 85px;
	width: 110px;
}

#nav li a {
	padding: 0 1em;
	color: #565354;
	text-transform: uppercase;
	font-size: 17.3px;
	font-weight: bold;
	line-height: 20px;
	font-family: Arial, Helvetica, sans-serif;
	list-style-type: none;
}

#nav li a.first {
	padding-left: 0;
}

ul, li {
	list-style-type: none;
}

/* END NAVIGATION */

/* MAIN CONTENT*/

#content {
	float: right;
	width: 500px;
	padding: 0 10px;
	margin-right: 110px;
}

#content .date {
	padding-left: 0;
	color: #000000;
}

#content .post-comments a {
 	color: #999999;
}

comment form .p {
	margin-right: -50px;
}

/* END MAIN CONTENT*/

/* FOOTER*/

#credits {
	background: url(http://nickhiebert.com/wp-content/themes/portfolio/images/footer_bg.png) repeat-x bottom;
	clear: both;
	margin-bottom: 40px;
	padding-top: 15px;
	margin-right: 14px;
	margin-left: 14px;
	padding-bottom: 20px;
}

#credits .alignleft {
	margin-left: 175px;
	margin-bottom: 10px;
	margin-top: 10px;
	padding-top: 10px;
	padding-bottom: 16px;
	color: #231F20;
}

#credits .alignright {
	color: #231F20;
}
#credits a, alignleft, alignright {
	padding-bottom: 20px;
}

/* END FOOTER*/

    Also here is the code that is generating my logo in header.php:

    <!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><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>
<link rel="shortcut icon" type="image/ico" href="http://www.nickhiebert.com/wp-content/themes/portfolio/images/favicon.ico"/>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
</head>

<body>
<div id="page">
	<div id="headerimg">
    <h1><a href="http://nickhiebert.com/"><img src="http://nickhiebert.com/wp-content/themes/portfolio/images/logo.png" alt="logo"/></a></h1>
    </div>
    <ul id="nav">
    	<?php wp_list_pages('sort_column=menu_order&depth=1&title_li=');?>
	</ul>
	</div>
	<!--/header-->

    If anyone knows the problem please let me know.
    Also I know it doesn’t display properly in IE 6,7,8/Opera I will fix that later.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Marventus

    (@marventus)

    16 years, 3 months ago

    Hi Nick,

    I know you posted your pb a really long time ago, but I recently joined WP and I’m trying to help out as much as I can, so I’m reviewing unanswered posts from a couple of months back.

    I took a look at your site and it’s still displaying the same behavior on IE 8, FF 3.5.7, and Chrome 4.0 when you zoom in or out. It does not happen in Safari, but I think it has to do with its zooming system (I’m pretty sure it only changes the font size: the rest of the elements stay the same).

    I used to have that problem in this blog when I first started customizing it. It turned out to be related to mixing absolute (size in px or pt) and relative (%) sizing. I fixed it by getting rid of almost all relative sizes and replacing it with absolute ones. Basically, the problem with relative sizing is that some page elements (such as pictures, ads, flash animations or the likes) require absolute sizes to display correctly, and sometimes the combination of relative with absolute can generate issues like the one you’re experiencing.

    So, in order to fix it, I suggest you try to get rid of as many relative sizes as you can, and try to use px, em, or pt (when applicable). Depending on your design, some elements like header, body, container, wrapper, etc. might need a 100% width command, but if you’re not sure which ones, you’ll be able to figure it out with trial and error, so don’t worry about it.

    Let me know if that does the trick.

    Marventus

    (@marventus)

    16 years, 2 months ago

    Hello again, Nick.

    I hope you’re doing well, and that you were able to figure out your pb. If all your questions and doubts were answered, and if you do not have further questions, would you mind marking this thread as “resolved”? That would help the community a lot.
    Thanks!

    Marventus

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Website not displaying properly’ is closed to new replies.