PDA

View Full Version : Odd Issue


afield69
05-14-2009, 12:48 PM
Good afternoon folks!

Web design is a hobby of mine that I'm slowly coming to grips with, I'm currently in the process of building a website for a personal project, however I've become unstuck.

When resizing the width of the internet browser, when it reaches around a quarter of it's original size a strange white border or margin appears along the right hand side of the layout. I've attached two images as an example as to what is happening. I'm using Localhost at the minute until it's ready to go live, so unfortunetly I do not have a live example.

http://img9.imageshack.us/img9/345/cssissue.png

http://img22.imageshack.us/img22/9971/cssissue2.png

I'll also attach my code, whether or not it will help is another matter.

* {
margin: 0px;
padding: 0px;

}

center {
text-align: center;
}

#wrapper {
background-color: #FFFFFF;
height: 900px;
margin: 0px;
padding: 0px;
width: 100%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position: relative;
left: 0px;
top: 0px;

}

#wrapper #logo-title {
width:100%;
text-align:center;

}
#wrapper #logo {
margin:0 auto 0 auto;
padding:0;
margin-top: 15px;


}

#wrapper #navbar1 {
background-image: url(../images/Nav.jpg);
background-repeat: repeat-x;
width: 100%;
height: 62px;
position: relative;
margin-top: 2%;
background-color: #FFFFFF;

}

#wrapper #navbar2 {
background-image: url(../images/navbar1_03.jpg);
height: 36px;
width: 73%;
top: 1px;
padding: 0px;
position: absolute;
background-color: #0000FF;
margin-left: 200px;
margin-top: 0.5%;

}

#wrapper #maincontent {
background-image: url(../images/quick_03.jpg);
height: 1122px;
float: right;
background-repeat: no-repeat;
right: 25px;
min-width: 1000px;
max-width: 1500px;
min-height: 100%;
position: absolute;
margin: 0;
width: 66%;
margin-top: 140px;

}

#wrapper #copyright {
position: absolute;
background-image: url(../images/copyright_03.jpg);
height: 56px;
width: 1184px;
right: 32px;
top: 1438px;
float: left;
margin-right: 200px;

}

#wrapper #footer_closure {
background-image: url(../images/Sliced-Advoe-Mockup_49.jpg);
background-repeat: repeat-x;
height: 57px;
width: 100%;
top: 1500px;
margin-top: 10px;
position: absolute;

I can imagine the code is littered with positioning errors, but any help on this situation would be great, thank you for your time.

coloeagle
05-14-2009, 01:00 PM
I can imagine the code is littered with positioning errors, but any help on this situation would be great, thank you for your time.
Yup you have a few in there. :wink:

For now look at the background image styling you have. Some have the background repeating and some have the background at no-repeat.

afield69
05-14-2009, 01:30 PM
Thank you for your reply Coloeagle.

Am I looking for something inparticular? I've had a good look through and changed what I can regarding the background repeating.

coloeagle
05-14-2009, 01:37 PM
Am I looking for something inparticular? I've had a good look through and changed what I can regarding the background repeating.
Tough to really trouble shoot without an actual page.

Post the css and the html

afield69
05-14-2009, 02:17 PM
As requested, the HTML. I'm using a CMS called Drupal, so excuse the PHP.

<div id="wrapper">

<body class="<?php print $body_classes; ?>">

<div id="page"><div id="page-inner">

<a name="top" id="navigation-top"></a>
<?php if ($primary_links || $secondary_links || $navbar): ?>
<div id="skip-to-nav"><a href="#navigation"><?php print t('Skip to Navigation'); ?></a></div>
<?php endif; ?>

<!--Start of Header-->

<div id="header"><div id="header-inner" class="clear-block">

<?php if ($logo || $site_name || $site_slogan): ?>
<div id="logo-title">

<?php if ($logo): ?>
<div id="logo"><a href="<?php print $front_page; ?>" title="<?php print t('Shwizz Home Page'); ?>" rel="home"><img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" id="logo-image" /></a></div>
<?php endif; ?>

<!--End of Header-->

<div id="maincontent">
<?php print $maincontent; ?>
</div>

<?php if ($site_name): ?>
<?php if ($title): ?>
<div id="site-name"><strong>
<a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home">
<?php print $site_name; ?>
</a>
</strong></div>
<?php else: ?>
<h1 id="site-name">
<a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home">
<?php print $site_name; ?>
</a>
</h1>
<?php endif; ?>
<?php endif; ?>

<?php if ($site_slogan): ?>
<div id="site-slogan"><?php print $site_slogan; ?></div>
<?php endif; ?>

</div> <!-- /#logo-title -->
<?php endif; ?>

<div id="navbar1">
<?php print $navbar1; ?>

<div id="navbar2">
<?php print $navbar2; ?>
</div>


<?php if ($header): ?>
<div id="header-blocks" class="region region-header">
<?php print $header; ?>
</div> <!-- /#header-blocks -->
<?php endif; ?>

</div></div> <!-- /#header-inner, /#header -->

<div id="main"><div id="main-inner" class="clear-block<?php if ($search_box || $primary_links || $secondary_links || $navbar) { print ' with-navbar'; } ?>">

<div id="content"><div id="content-inner">

<?php if ($mission): ?>
<div id="mission"><?php print $mission; ?></div>
<?php endif; ?>

<?php if ($content_top): ?>
<div id="content-top" class="region region-content_top">
<?php print $content_top; ?>
</div> <!-- /#content-top -->
<?php endif; ?>

<?php if ($breadcrumb || $title || $tabs || $help || $messages): ?>
<div id="content-header">
<?php print $breadcrumb; ?>
<?php if ($title): ?>
<h1 class="title"><?php print $title; ?></h1>
<?php endif; ?>
<?php print $messages; ?>
<?php if ($tabs): ?>
<div class="tabs"><?php print $tabs; ?></div>
<?php endif; ?>
<?php print $help; ?>
</div> <!-- /#content-header -->
<?php endif; ?>


<?php if ($feed_icons): ?>
<div class="feed-icons"><?php print $feed_icons; ?></div>
<?php endif; ?>

<?php if ($content_bottom): ?>
<div id="content-bottom" class="region region-content_bottom">
<?php print $content_bottom; ?>
</div> <!-- /#content-bottom -->
<?php endif; ?>

</div></div> <!-- /#content-inner, /#content -->

<?php if ($search_box || $primary_links || $secondary_links || $navbar): ?>
<div id="navbar"><div id="navbar-inner" class="clear-block region region-navbar">

<a name="navigation" id="navigation"></a>

<?php if ($search_box): ?>
<div id="search-box">
<?php print $search_box; ?>
</div> <!-- /#search-box -->
<?php endif; ?>

<?php if ($primary_links): ?>
<div id="primary">
<?php print theme('links', $primary_links); ?>
</div> <!-- /#primary -->
<?php endif; ?>

<?php if ($secondary_links): ?>
<div id="secondary">
<?php print theme('links', $secondary_links); ?>
</div> <!-- /#secondary -->
<?php endif; ?>

<?php print $navbar; ?>

</div></div> <!-- /#navbar-inner, /#navbar -->
<?php endif; ?>

<?php if ($left): ?>
<div id="sidebar-left"><div id="sidebar-left-inner" class="region region-left">
<?php print $left; ?>
</div></div> <!-- /#sidebar-left-inner, /#sidebar-left -->
<?php endif; ?>

<?php if ($right): ?>
<div id="sidebar-right"><div id="sidebar-right-inner" class="region region-right">
<?php print $right; ?>
</div></div> <!-- /#sidebar-right-inner, /#sidebar-right -->
<?php endif; ?>

</div></div> <!-- /#main-inner, /#main -->

<?php if ($footer || $footer_message): ?>
<div id="footer"><div id="footer-inner" class="region region-footer">

<?php if ($footer_message): ?>
<div id="footer-message"><?php print $footer_message; ?></div>
<?php endif; ?>

<?php print $footer; ?>

</div></div> <!-- /#footer-inner, /#footer -->
<?php endif; ?>

</div></div> <!-- /#page-inner, /#page -->

<!--Start of Copyright Box-->

<div id="copyright">
<?php print $copyright; ?>
</div>


<!--End of Footer-->

<div id="footer_closure">
<?php print $footer_closure; ?>
</div>


<?php if ($closure_region): ?>
<div id="closure-blocks" class="region region-closure"><?php print $closure_region; ?></div>
<?php endif; ?>

<?php print $closure; ?>

</body>
</html>And the CSS.

* {
margin: 0px;
padding: 0px;

}

center {
text-align: center;
}

#wrapper {
background-color: #FFFFFF;
height: 900px;
margin: 0px;
padding: 0px;
width: 100%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position: relative;
left: 0px;
top: 0px;


}

#wrapper #logo-title {
width:100%;
text-align:center;

}
#wrapper #logo {
margin:0 auto 0 auto;
padding:0;
margin-top: 15px;


}

#wrapper #navbar1 {
background-image: url(../images/Nav.jpg);
width: 100%;
height: 55px;
position: relative;
margin-top: 2%;
background-color: #FFFFFF;

}

#wrapper #navbar2 {
background-image: url(../images/navbar1_03.jpg);
height: 36px;
width: 73%;
top: 1px;
padding: 0px;
position: absolute;
margin-left: 200px;
margin-top: 0.5%;

}

#wrapper #maincontent {
background-image: url(../images/quick_03.jpg);
height: 1122px;
float: right;
background-repeat: no-repeat;
right: 25px;
min-width: 1000px;
max-width: 1500px;
min-height: 100%;
position: absolute;
margin: 0;
width: 66%;
margin-top: 140px;

}

#wrapper #copyright {
position: absolute;
background-image: url(../images/copyright_03.jpg);
height: 56px;
width: 1184px;
right: 32px;
top: 1438px;
float: left;
margin-right: 200px;

}

#wrapper #footer_closure {
background-image: url(../images/Sliced-Advoe-Mockup_49.jpg);
height: 57px;
width: 100%;
top: 1500px;
margin-top: 10px;
position: absolute;

coloeagle
05-14-2009, 06:58 PM
Ok, a few things to look at that can cause problems.
You have the wrapper set to be 100% width and then you have other div's with fixed widths or like the #maincontent with a minimum and maximum width setting.