19 replies [Last post]
DevPC
Offline
newbie
Des Moinves Iowa
Last seen: 12 years 39 weeks ago
Des Moinves Iowa
Joined: 2009-03-08
Posts: 5
Points: 0

I have had this problem with my new website. I am new to CSS and am slowly learning, but the problem is when you resize the window in IE, or any other browse, it does not retain the layout properly. My Menu background and content background seem to get cut off at the current window size. However in full screen it works just fine. Below you will find my style.css and my index.css, Please help.

/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/
 
* {
	margin: 0;
	padding: 0;
}
 
body {
	margin: 0px;
	background: #002F43 url(images/bg01.jpg) repeat-x;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #B9B9B9;
}
 
h1, h2, h3 {
	margin-bottom: 1.5em;
}
 
h1 {
	font-size: 2em;
}
 
h2 {
	font-size: 1.4em;
}
 
h3 {
	font-size: 1em;
}
 
p, ul, ol {
	margin-bottom: 1.5em;
	line-height: 180%;
}
 
ul, ol {
	margin-left: 3em;
}
 
blockquote {
	margin-left: 3em;
	margin-right: 3em;
}
 
a {
	color: #8AC800;
}
 
a:hover {
	text-decoration: none;
}
 
strong {
	color: #D7D7D7;
}
 
img.left {
	float: left;
	margin: 5px 25px 0px 0px;
}
 
img.right {
	float: right;
	margin: 5px 0px 0px 25px;
}
 
/* Background */
 
#bg1 {
	background: url(images/bg02.jpg) no-repeat center top;
}
 
#bg2 {
	background: url(images/bg03.jpg) no-repeat center top;
}
 
#bg3 {
	background: url(images/bg04.jpg) repeat-y center top;
}
 
#bg4 {
	background: url(images/bg05.jpg) no-repeat center top;
}
 
#bg5 {
	background: url(images/bg06.jpg) no-repeat center bottom;
 
}
 
/* Header */
 
#header {
	width: 900px;
	height: 145px;
	margin: 0px auto;
	color: #FFFFFF;
 
}
 
#header h1 {
	float: left;
	margin: 0px;
	padding: 70px 0px 0px 25px;
	font-size: 40px;
}
 
#header h1 sup {
	font-weight: normal;
}
 
#header h2 {
	float: right;
	margin: 0px;
	padding: 95px 25px 0px 0px;
	font-size: 14px;
}
 
#header a {
	text-decoration: none;
	color: #FFFFFF;
}
 
/* Header2 */
 
#header2 {
	width: 900px;
	height: 88px;
	margin: 0px auto;
}
 
/* Menu */
 
#menu {
	float: left;
 
}
 
#menu ul {
	margin: 0px;
	padding: 34px 0px 0px 0px;
	list-style: none;
}
 
#menu li {
	float: left;
}
 
#menu a {
	padding-left: 50px;
	text-decoration: none;
	font-size: 16px;
	font-weight: bold;
	color: #FFFFFF;
}
 
/* Search */
 
#search {
	float: right;
 
}
 
#search form {
	margin: 0px;
	padding: 35px 80px 0px 0px;
}
 
#search fieldset {
	margin: 0px;
	padding: 0px;
	border: none;
}
 
#search input.text {
	width: 160px;
	background: none;
	border: none;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #AEC38B;
}
 
#search input.button {
	display: none;
}
 
/* Page */
 
#page {
	width: 846px;
	margin: 0px auto;
	padding: 40px 0px 0px 0px;
 
}
 
/* Content */
 
#content {
	float: left;
	width: 583px;
 
}
 
.post {
}
 
.post .title {
	height: 49px;
	background: url(images/img02.gif) no-repeat;
}
 
.post .title h2 {
	float: left;
	padding: 12px 0px 0px 24px;
	font-size: 24px;
}
 
.post .title h2 a {
	text-decoration: none;
	color: #FFFFFF;
}
 
.post .title h2 a:hover {
	color: #8AC800;
}
 
.post .title p {
	float: right;
	padding: 12px 24px 0px 0px;
	font-size: 15px;
	font-weight: bold;
	color: #343434;
}
 
.post .entry {
	padding: 30px 23px 0px 23px;
}
 
.post .meta {
	height: 70px;
	clear: left;
	margin: 0px 23px;
	padding: 15px 0px 0px 0px;
	border-top: 1px solid #262626;
}
 
.post .meta .credit {
	float: left;
}
 
.post .meta .links {
	float: right;
}
 
.post .meta .links .more {
	padding-left: 17px;
	background: url(images/img05.gif) no-repeat left center;
}
 
.post .meta .links .comments {
	padding-left: 19px;
	background: url(images/img04.gif) no-repeat left center;
}
 
/* Sidebar */
 
#sidebar {
	float: right;
	width: 236px;
}
 
#sidebar ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
}
 
#sidebar li {
	background: url(images/img03.gif) no-repeat;
	padding: 0px 23px 20px 23px;
}
 
#sidebar li ul {
}
 
#sidebar li li {
	padding: 8px 0px;
	background: none;
                border-bottom: 1px solid #262626;
 
}
 
#sidebar h2 {
	margin: 0px;
	padding: 16px 0px 30px 0px;
	font-size: 14px;
	color: #FFFFFF;
}
 
/* Footer */
 
#footer {
}
 
#footer p {
	margin: 0px;
	padding: 20px 0px;
	text-align: center;
	color: #566D77;
}
 
#footer a {
	color: #8097A1;
}

<!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">
<head>
<meta name="verify-v1" content="z/XMyoLYN+L5NulX6ceL/59s+V1SEfl4tnZIcN+P2aY=" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Dev PC - Computer repair and services in Des Moines, Iowa and surrounding areas.</title>
<meta name="description" content="Computer repair and services for Des Moines, Iowa and surrounding areas" />
<META NAME="ROBOTS" CONTENT="ALL">
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="bg1">
  <div id="header">
    <h1><a href="http://www.devpc.net">Dev PC</a></h1>
  </div>
  <!-- end #header -->
</div>
<!-- end #bg1 -->
<div id="bg2">
  <div id="header2">
    <div id="menu">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="About_Us.html">About Us</a></li>
        <li><a href="Rates_and_Services.html">Rates and Services</a></li>
       <!-- <li><a href="support">Support</a></li> -->
        <li><a href="contact.htm">Contact Us</a></li>
      </ul>
    </div>
    <!-- end #menu -->
    <div id="search">
      <form method="get" action="#">
        <fieldset>
        <input type="text" name="q" value="search keywords" id="q" class="text" />
        <input type="submit" value="Search" class="button" />
        </fieldset>
      </form>
    </div>
    <!-- end #search -->
  </div>
  <!-- end #header2 -->
</div>
<!-- end #bg2 -->
<div id="bg3">
  <div id="bg4">
    <div id="bg5">
      <div id="page">
        <div id="content">
          <div class="post">
            <div class="title">
              <h2><a href="#">Welcome</a></h2>
            </div>
            <div class="entry">
              <p>Dev PC was created with the idea of offering rock bottom prices for professional service. We understand that with the Economy, people are looking to repair equipment rather than replace. Dev PC prices are extremely competetive and can offer you the solution needed without making you worry about cost. All of our repair costs are fixed rate starting at $25.00. Dev PC offers excellent customer service skills and professionally trained technicians.</p>
            </div>
            <div class="entry"> </div>
          </div>
          <div class="post">
            <div class="title">
              <h2><a href="#">Our Goal</a></h2>
            </div>
            <div class="entry">
              <p>We are here to offer you low prices and outstanding service with our highly trained technicians. We live in a world of technology that is always growing, and as it grows we must grow with it, thats why we keep up with all current technologies, and strive to provide you with the best support available. Our experiance with customer service will guarantee that you always have a wonderful experiance.</p>
            </div>
            <div class="entry"> </div>
          </div>
        </div>
        <!-- end #content -->
        <div id="sidebar">
<li>
<h2>Links</h2>
	<ul>
<li><a href="http://click.linksynergy.com/fs-bin/click?id=21ZLA/ArBQE&offerid=102327.10000025&type=3&subid=0" >TigerDirect.com</a><IMG border=0 width=1 height=1 src="http://ad.linksynergy.com/fs-bin/show?id=21ZLA/ArBQE&bids=102327.10000025&type=3&subid=0" ></li>
<li><a href="http://www.microsoft.com">Microsoft</a></li>
<li><a href="http://www.newegg.com">NewEgg</a></li>
	</ul>
</li>
 
   </div>
        <!-- end #sidebar -->
        <div style="clear: both; height: 40px;">&nbsp;</div>
      </div>
      <!-- end #page -->
    </div>
  </div>
</div>
<!-- end #bg3 -->
<div id="footer">
  <p>(c) 2008 Devpc.net</p>
</div>
<!-- end #footer -->
 
<!-- traffic stats -->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-7723609-2");
pageTracker._trackPageview();
} catch(err) {}</script>
 
</body>
</html>

DevPC
Offline
newbie
Des Moinves Iowa
Last seen: 12 years 39 weeks ago
Des Moinves Iowa
Joined: 2009-03-08
Posts: 5
Points: 0

Forgot to mention my

Forgot to mention my website, it's in my signature, but here you go www.devpc.net

Josh Connerty
Josh Connerty's picture
Offline
Enthusiast
Wiltshire, England
Last seen: 10 years 40 weeks ago
Wiltshire, England
Joined: 2008-10-17
Posts: 268
Points: 23

I'm afraid that as far as I

I'm afraid that as far as I know there is not a way of resizing background images with the browser window.

You can do this by setting percentages as heights and widths of elements and images but as far as I know not background images.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

You need to give the

You need to give the elements whose width is 100% a min-width equal to the fixed width you've assigned to other elements (ie 900px).

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Kelon
Offline
Regular
UK
Last seen: 12 years 38 weeks ago
UK
Joined: 2008-12-22
Posts: 17
Points: 0

Hi... just had a look and I

Hi... just had a look and I couldn't see the background to the menu having a problem, it moved about as the window width shrank but I didn't find it offensive visually. The page background is cut off though... I'd say you need to match it better to #002F43 (your background page colour) in whatever image software you used to create it. That'll do it. If it's PhotoShop then be sure to tick the little box in the colour picker saying something like "web colours only"... you can even input the web ref there.

...another strategy might be to make the white light a transparent gif with a diffusion dither on it... but it's a bit difficult to explain if you don't know what I mean and the result won't be as smooth so you might not like it anyway.

Hope this helps. Nice site. Interesting how you've tackled the background. Thanks for showing.

DevPC
Offline
newbie
Des Moinves Iowa
Last seen: 12 years 39 weeks ago
Des Moinves Iowa
Joined: 2009-03-08
Posts: 5
Points: 0

It looks like it's mainly my

It looks like it's mainly my background images that are getting cut off when the window is resized. What can I do to this bit of code to remedy that?

#bg1 {
	background: url(images/bg02.jpg) no-repeat center top;
}
 
#bg2 {
	background: url(images/bg03.jpg) no-repeat center top;
}
 
#bg3 {
	background: url(images/bg04.jpg) repeat-y center top;
}
 
#bg4 {
	background: url(images/bg05.jpg) no-repeat center top;
}
 
#bg5 {
	background: url(images/bg06.jpg) no-repeat center bottom;
 
}

Kelon
Offline
Regular
UK
Last seen: 12 years 38 weeks ago
UK
Joined: 2008-12-22
Posts: 17
Points: 0

This might be terminology.

This might be terminology. When you say 'cut-off' when you 'resize' what exactly do you mean?
If you shrink the window to teeny-tiny, then enlarge it, bits of the jpgs don't redraw where they were before? That'll be a blip in your browser on your machine...
OR... do you mean the images move to center themselves in the small screen., then don't move back? That'll be a new one on me.

You're images are a fixed size, as explained above by another respondee.. which is why I suggested what I did.

Sorry, but I think we're struggling to understand because we can't see what you're seeing. We'd love to help... explaining in words is hard isn't it., for everyone.

DevPC
Offline
newbie
Des Moinves Iowa
Last seen: 12 years 39 weeks ago
Des Moinves Iowa
Joined: 2009-03-08
Posts: 5
Points: 0

Yes, it is hard to explain.

Yes, it is hard to explain. Okay, When you click the 'restore down' in IE, so that you have a smaller screen, my content and everything is the way it should be however when you scroll to the right, my menu image is cut off as well as my background image for main content. I've seen this on two machines so far so thats why I think it's my code.

Kelon
Offline
Regular
UK
Last seen: 12 years 38 weeks ago
UK
Joined: 2008-12-22
Posts: 17
Points: 0

Hi., I was hoping someone

Hi., I was hoping someone who's more up on IE would come along and help out because 'restore down' doesn't mean anything to me. I'm a mac and Firefox native myself... so I only use IE very superficially to give my websites an initial "nothing catastrophic" look-see, then hand it on to others to put a bomb under... I've done a quick search out there on the ole t'internet and "restore down" search phrase (including the speech marks remember) brings up some interesting stuff which suggests it's a buggy feature... you'll make more sense of it than me. I'll add it to my list of "to be curious about when I've 5"...
Best of luck..

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 11 years 3 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

I'm using FF as well, but I

I'm using FF as well, but I see what you mean.

Just make it so your browser window isn't full screen, then shrink the width of the browser. Do this and then scroll to the right, and the images get cut off.

I've been ripping my hair out trying to help with another issue, but want to look into this one too asap! Do that however, and you should see the issue.

While scrolled to the far right, drag the right edge of your browser window to the right again, and you will see the images come back. It looks as if they are being covered up by one of the bg images.. but that is my initial guess, as I haven't had time to sort out how the bg is made up with the various images either.

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 11 years 3 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

Ok, I finally got a second

Ok, I finally got a second to look at this.. the fix is incredibly easy actually. I was looking for some insanely hard fix for this and then this hit me.

Add a wrapper div around the entire page. Set the width to the minimum that you want to see at all times.

For example:

<html>
<body>
 
<div id="wrapper" style="width: 950px;">
   <INSERT ALL OF YOUR CURRENT CODE HERE>
</div>
 
</body>
</html>

What this does, is that you will at all times see 950px of your image. Your scrollbars will work around that value, and as long as the width of your wrapper is set to something higher than your image, you will never get any cut off edges.

(Try it, and play with the width value to see what I mean.. it's easier to understand when you see it in action!)

Try adding that, and see if that works! I tested it in FF only with Firebug. The minute I tossed that in there, your page stopped breaking. I'm assuming it will work in the other browsers as well.

EDIT:
This will also keep your left edge visible.. before, your content was shifting out the right edge (appeared to be) as your background images were shifting left. This locks everything in place and ensures your layout remains intact.

Kelon
Offline
Regular
UK
Last seen: 12 years 38 weeks ago
UK
Joined: 2008-12-22
Posts: 17
Points: 0

Yep... Titan has it, no

Yep... Titan has it, no messin'. I never horizontally scroll, it's against the law... what law? Well, THE law of never horzontal scrolling of course. It's why I'm a fluid layouts, or die, kind of webite and let my pages go pretty narrow before any horizontal scrolling is required by Mr/Ms User. I know fixed layouts are ultimately easier to code. I'd recommend you look at 550px wide as a min for your design and 950px as a max-width. IE6 however, and I make an exception (which I'm reviewing - not entirely familiar with this forum yet to know what the philosophy is) with a... hush, whisper: hack.... the old fixed width for IE6 only, now showing on a web site near you... it's my one concession to IE6 and it's only 'for now'....

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Um, hello, did you just

Um, hello, did you just ignore the reply I gave you earlier? :rolleyes:

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Kelon
Offline
Regular
UK
Last seen: 12 years 38 weeks ago
UK
Joined: 2008-12-22
Posts: 17
Points: 0

Yep, Titan has it, no

Yep, Titan has it, no messin'. Yep, Tyssen had it, no messin'. Titan explained it some more... cool, everyone's helpful, everyone's happy... :thumbsup:

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 11 years 3 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

Tyssen wrote:Um, hello, did

Tyssen wrote:

Um, hello, did you just ignore the reply I gave you earlier? :rolleyes:

Sorry Tyssen, I honestly didn't really understand what your reply was saying either lol..

I understood what you meant, but I took it more as that you had to set a "min-width: 900px;" value to each item.. setting 1 wrapper around everything worked fine, and was the first thing I thought of.

In any case, I'm glad it got figured out! :thumbsup:

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Titan793 wrote:In any case,

Titan793 wrote:

In any case, I'm glad it got figured out! :thumbsup:

But did it? The last post by the original thread starter seems to indicate that he/she still has a problem.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Kelon
Offline
Regular
UK
Last seen: 12 years 38 weeks ago
UK
Joined: 2008-12-22
Posts: 17
Points: 0

Yes, DevPc talked about

Yes, DevPc talked about 'restore down' which, whether it was a feature of DevPc's problem or a red herring, I was unable to assess as I'm not familiar with it. It's something I'll get the chance to look at tomorrow for my own interest, though I'm not sure I'll have any revelation - shame DevPc's not been back, though I can understand the frustration of not understanding what you're being told and of not being able to communicate the problem you're having... not sure there's much else we can do now unless DevPc pops along...

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 11 years 3 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

Tyssen wrote:Titan793

Tyssen wrote:
Titan793 wrote:

In any case, I'm glad it got figured out! :thumbsup:

But did it? The last post by the original thread starter seems to indicate that he/she still has a problem.

I'm assuming that the issue is solved, because it does work at this point.. Dev hasn't stopped back in to let us know if this fixed his issue however, so I guess we can't really be sure until we get a confirmation from him.

As far as the "restore down" thing.. it's the box that maximizes your window, and then returns it to it's original (non full-screen) size. (Up by the "x" to close your browser window)

Try full-screening your browser, and then hover your mouse over the 2 boxes that the maximize icon changes into. A tooltip should come up saying "Restore Down" .. basically, he was taking the window out of full screen mode, so he could manually change the window dimensions.. which was breaking the page layout.

Again, setting that wrapper div should solve that.. but we will have to wait for Dev to let us know for sure.

DevPC
Offline
newbie
Des Moinves Iowa
Last seen: 12 years 39 weeks ago
Des Moinves Iowa
Joined: 2009-03-08
Posts: 5
Points: 0

Sorry it took so long for me

Sorry it took so long for me to respond, I had some medical issues come up. The wrapper did work now I just need to center the content, I appreciate all of your help and again, my appologies for the late responce.

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 11 years 3 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

Oh, no problem at all..

Oh, no problem at all.. medical issues definitely take precedence over websites! Hope all is well..

As far as centering everything.. setting a "margin: 0 auto;" to the wrapper should center everything I think. I know I got everything to center when I tried it.

EDIT:

Change this:

<div id="wrapper" style="width: 950px; margin-left: 10%; margin-right: 10%;">

To:

<div id="wrapper" style="width: 950px; margin: 0 auto;">

See if that does the trick. I tried it with Firebug, and it centered everything right up!

* Something is funky with your bg images, and navigation menu now though.. there is a hard line on each side, and the nav is shifted to the right. Not sure if you're changing things, or in the process of changing them.. but thought I'd mention it.