3 replies [Last post]
OGirly
OGirly's picture
Offline
newbie
Ohio :(
Last seen: 9 years 3 weeks ago
Ohio :(
Timezone: GMT-5
Joined: 2011-02-21
Posts: 8
Points: 11

Hello,

I've never posted on this forums before, but I've used it many times to help me when trying to design a site etc. I am currently making a place holder site to have something up until I can finish my main site in April, and I am currently having an issue with all browsers creating a lot of extra "space" to the right of the page. I'm rather new to CSS and XHTML so I thought I better ask before I mess up what I already have. I searched the forums, and the internet, but I was unable to find an answer to my problem :\. I validated my XHTML as Transitional 1.0 (I think that's the one I did) and my CSS as well (I think it said 2.1 :\). Anyway, I wasn't sure why it was doing what it is doing. I'll post my CSS and my HTML as well as a link to the site; I hope that's enough info. I'd really like to figure out where all this extra space is coming from, even when the window is made to be really really really tiny :\.

Thanks so much, I sure hope someone can help...

My Website
http://www.ogirly.com

My HTML

<!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>OGirly.com</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<!-- Centers page regardless of resolution: Includeds all page content -->
<div id="wrap" class="centerAlign">
<!-- End -->
 
<!-- Creates header image and navigation bar for page -->
	<!-- Logo -->
<div id="placeHolderLogo">
<img src="images/OGirly/placeholderLogo.png" height="308" width="313" alt="OGirly.com Company Logo" />
</div>
	<!-- End -->
 
    <!-- Divider Bar -->
<div id="menuDividerBar">
<img src="images/OGirly/menuBar.png" height="38" width="1022" alt="A bar dividing the page from the navigation panel" />
</div>
	<!-- End -->
 
 
    <!-- Navigation Menu -->
    	<!-- Containing Div -->
<div id="navigationMenu">
		<!-- Button Table Div -->
    <div>
        <table>
        <tr>
        <td>
        											<!-- Links -->
        	<!-- Home Link -->
        <a href="http://www.google.com">
        <img src="/images/OGirly/homeButtonNormal.png" height="37" width="123" alt="Home Button" /></a></td><td>
 
        	<!-- Blog Link -->
        <a href="http://www.google.com">
        <img src="/images/OGirly/blogButtonNormal.png" height="37" width="123" alt="Blog Button" /></a></td><td>
 
        	<!-- About Link -->
        <a href="http://www.google.com">
        <img src="/images/OGirly/aboutButtonNormal.png" height="37" width="123" alt="About Button" /></a></td><td>
 
        	<!-- Shop Link -->
        <a href="http://www.google.com">
        <img src="/images/OGirly/shopButtonNormal.png" height="37" width="123" alt="Shop Button" /></a></td><td>
 
       		<!-- Contact Link -->
        <a href="http://www.google.com">
        <img src="/images/OGirly/contactButtonNormal.png" height="37" width="123" alt="Contact Button" /></a></td>
        											<!-- End -->
        </tr>
        </table>
    </div>
        <!-- End -->
</div>
        <!-- End -->
    <!-- End -->
    <!-- End -->
 
    <!-- Underconstruction Placeholder -->
<div id="underConstructionPlaceHolder">
	<img src="/images/OGirly/underConstructionMessageText.png" height="423" width="471"
    			 alt=
                 "We would love to welcome you to <a href="http://www.ogirly.com" rel="nofollow">www.ogirly.com</a> but we're not exactly ready yet. 
    		     Please stop back soon! Ogirly.com launches April, 20th 2011" 
                 />
</div>
    <!-- End -->
 
    <!-- Bottom Bar and bottom link menu -->
<div id="bottomDividerBar">
	<table class="centerAlign">
    <tr>
    <td><a href="http://www.ogirly.com">www.Ogirly.com</a>
    </td>
    <td style="padding: 0 1px 0 8px;">
    :
    </td>
    <td>
    &copy; Alice Tharp
    </td>
    <td style="vertical-align:bottom;">
    <span style="font-size:9px;">2/20/2011</span>
    </td>
    </tr>
    </table>
</div>
	<!-- End -->
 
 
<!-- End of page -->
</div>
<!-- End -->
 
 
 
</body>
</html>

My CSS

@charset "UTF-8";
/* CSS Document */
 
/* Main Element Styles */
html {
	margin: 0;
	padding: 0;
	}
 
body {
	background-color:#ffCCff;
	min-width: 1000px;
	margin: 0;
	padding: 0;
	overflow: visible;
    }
 
a {
	border-style:none;
	}
 
img {
	border:none;
	}
 
#wrap { 
	width: 1000px; 
	margin: 0 auto; 
	}
 
.centerAlign {
	position:relative;
	left: 400px;
	}
 
/* End */
 
 
/* Top Banner and Navigation Bar Styles */
#placeHolderLogo {
	position: relative;
	top: 5px;
	z-index: 3;
	}
 
#menuDividerBar {
	position: relative;
	top: -114px;
	left: 0px;
	z-index: 2;
    }
 
#navigationMenu {
	position: relative;
	top: -155px;
	left: 320px;
	z-index: 4;
    }
/* End */
 
 
/* Content Container Styles */	
#underConstructionPlaceHolder {
	position:relative;
	top: -100px;
	left: 300px;
    }
/* End */
 
 
/* Bottom Divider Styles */
#bottomDividerBar {
	position: relative;
	bottom: 10px;
	left: 0px;
	background-image:url(/images/OGirly/bottomBar.png);
	}
/* End */

OGirly
OGirly's picture
Offline
newbie
Ohio :(
Last seen: 9 years 3 weeks ago
Ohio :(
Timezone: GMT-5
Joined: 2011-02-21
Posts: 8
Points: 11

No worries!!! I figured it

No worries!!! I figured it out! yay!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 7 hours 3 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9754
Points: 3836

Welcome, ex-Lurker

It would be a courtesy to the other denizens of the forum to spell out what the cause of the problem was, and what the solution was.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

OGirly
OGirly's picture
Offline
newbie
Ohio :(
Last seen: 9 years 3 weeks ago
Ohio :(
Timezone: GMT-5
Joined: 2011-02-21
Posts: 8
Points: 11

lol thanks for the welcome

lol thanks for the welcome Tongue

Yes, well it seemed that my poor design skills were at fault and it was some divs not positioning correctly in my columns (at least I think that's what it was). I also put a wrap around everything, as well as individually wrapping my header, body, and footer, to center to the page using the:

margin: 0 auto; padding: 0;

which kept everything centered and aligned. The new site is working pretty well, although I am having a similar problem in Chrome and Safari; this time at the bottom of the page. I'm not sure what's wrong here, I've been working at fixing this for the last two days Sad maybe someone here could help? I wouldn't want to make a new thread since this is a similar issue.

Here's the site with the current problem:

http://www.ogirly.com

again, it works fine in IE, Mozilla, and Opera; but Chrome and Safari are the only ones adding that strange space. Given, it does not make the site inoperable, it's just not preferable to have it there.

Sorry for not posting my fix, I sort of figured since it seemed like it was my horrible design skills it wouldn't help many lol Tongue