24 replies [Last post]
AndersStudio
AndersStudio's picture
Offline
Enthusiast
Yardley, PA
Last seen: 4 years 2 weeks ago
Yardley, PA
Timezone: GMT-5
Joined: 2005-11-09
Posts: 91
Points: 6

Alright, I did some research and was able to assemble most of the website in CSS > http://bpenvservices.com/testing/index_css.html

However, I am struggling to understand how to setup the left and right shadows. I made a main wrapper with the complete width of the website, which accounts for the shadows. Then I made 3 main divs: shadow_left, main, and shadow_right (all set to the appropriate widths).

Further, I am not sure why the #wrapper and/or #main is not filling the background with white in Firefox AND the box_top images seem to have some bottom padding in Firefox...

html:

<div id="wrapper">
		 <div id="shadow_left"></div>
		 <div id="main">
			 <div id="header_left">
				<a href="index.php" title=""><img src="images/bpes_title.gif" width="300" height="203" border="0" alt="BP Environmental Services, Inc." /></a>
			 </div>
 
			 <div id="header_middle">		       
				<img src="images/middle.jpg" alt=" " /> 		 
			 </div>
 
			 <div id="header_right">
				 <img src="images/creative_waste_solutions.gif" width="300" height="203" alt="" />
			 </div>
 
			 <div id="nav-bar">		 
				   <img src="images/nav_left.gif" align="left" alt="" />This is the nav	 <img style="position:relative; top:-18px;" src="images/nav_right.gif" align="right" alt="" />
			 </div>
 
			 <div id="leftcolumn">
				<img src="images/box_top.gif" alt="" /><div class="box_fill">
				<h1>Featured Testimonial</h1>
				<img class="small_pic_padding" style="background-image:url(images/middle.jpg)" src="images/small_pic_box.gif" width="274" height="93" />
				“Nunc at magna eu arcu scelerisque rhoncus. Nullam feugiat eros vel lacus. Pellentesque elementum tellus quis ante. In dui lacus, vulputate id, mattis a, semper condimentum, diam. Donec vehicula laoreet nibh. Aenean ut leo in ante convallis ornare.” - Client Abc, City, State
				</div>
				<img src="images/box_bottom.gif" alt="" />		 
			 </div>
 
			 <div id="content">		       
				<img src="images/box_top.gif" alt="" /><div class="box_fill">
				<h1>Welcome</h1>
				<img class="small_pic_padding" style="background-image:url(images/middle.jpg)" src="images/small_pic_box.gif" width="274" height="93" />
 
				We at BP Environmental Services, Inc. strive to be the premier waste service provider in all areas that we service. We accomplish this through a strategic understanding of our customer’s needs and goals as it pertains to their individual waste generation habits. Each customer and unique situation are treated respectively with individualized service, allowing us to handle an array of needs.... 
				</div>
				<img src="images/box_bottom.gif" alt="" />			 
			 </div>
 
			 <div id="rightcolumn">
				<img src="images/box_top.gif" alt="" /><div class="box_fill">
				<h1>Services Overview</h1>
				<img class="small_pic_padding" style="background-image:url(images/middle.jpg)" src="images/small_pic_box.gif" width="274" height="93" />
				<h2>Commercial</h2>
					Restaurants, Retail, Apartment Complexes, Auto Dealerships... More <br /><br />
					<h2>Construction</h2>
					Roofers, Builders, General Contractors, Restoration Companies... More <br /><br />
					<h2>Industrial</h2>
					Warehouses, Manufacturers, Distribution Centers, Medical Waste... More
				</div>
				<img src="images/box_bottom.gif" alt="" />	
			 </div>
 
			 <div id="footer">
				<img src="images/footer_left.gif" align="left" alt="" />
				<div id="footer_text">Copyright 2009 BP Environmental Services, Inc.</div><img style="position:relative; top:-34px;" src="images/footer_right.gif" align="right" alt="" />	
			 </div>
		 </div>
		<div id="shadow_right"></div> 
<div id="shadow_bottom">
		 	<img src="images/shadow_bottom_left.gif" align="left" /><img src="images/shadow_bottom_right.gif" align="right" />
		</div>
   </div>  

CSS:

body {
	margin:0;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#000;
	line-height:18px;
	background-color:#B8B8B8;
}
#wrapper { 
 margin: 0 auto;
 width: 982px;
 background:#FFF;
 text-align:center;
 
}
#main{
	width:952px;
	background:#FFF;
}
#header_left { 
 color: #333;
 margin: 0;
 margin-left:16px;
 padding: 0px;
 height: 203px;
 width: 300px;
 float: left;
 text-align:center;
}
#header_middle { 
 float: left;
 margin: 0;
 padding: 0;
 height: 203px;
 width: 320px;
 display: inline;
 background:#FFF;
}
#header_right { 
 margin: 0;
 padding: 0;
 height: 203px;
 width: 300px;
 float: left;
}
#nav-bar {
	padding:0;
	margin:0 0 0 16px;
	background-image:url(images/nav_bar.gif);
	background-repeat:repeat-x;
	height:50px;
	width:920px;	
	border-bottom:10px solid #FFF;
	color:#FFF;
	text-align:center;
	float: left;
}
 
 
#leftcolumn { 
 background: #FFF;
 margin: 0px 0px 0px 16px;
 padding: 0 5px 0 0;
 width: 300px;
 float: left;
}
#content { 
 float: left;
 margin: 0px 0px 0px 0px;
 padding: 0 5px 0 5px;
 width: 300px;
 display: inline;
}
#rightcolumn { 
 margin: 0px 0px 0px 0px;
 padding: 0 0 0 5px;
 height: 350px;
 width: 300px;
 float: left;
}
.box_fill{
	background-image:url(images/box_gradient.gif);
	background-repeat:repeat-x;
	min-height:370px;
	border-left:1px solid #dadfe4;
	border-right:1px solid #dadfe4;
	padding:0 12px 0 12px;
	vertical-align:top;
	text-align:left;
}
 
 
.small_pic_padding{
	margin-bottom:12px;
}
 
#footer { 
	background-color:#416880;
	height:35px;
	width:920px;
	color:#d3cdcd;
	font-size:11px;	
	padding:0;
	float:left;
	margin: 0px 0px 0px 16px;
	border-top:10px solid #FFF;
	border-bottom:10px solid #FFF;
}
#footer_text{
	padding:8px;
	text-align:left;
}
 
#shadow_left{	
	background-image:url(images/shadow_left.gif);
	background-repeat:repeat-y;
	width:15px;
	height:100%;
	float:left;
}
#shadow_right{
	background-image:url(images/shadow_right.gif);
	background-repeat:repeat-y;
	width:15px;
	height:100%;
	float:right;
}
#shadow_bottom{
	background-image:url(images/shadow_bottom.gif);
	background-repeat:repeat-x;
	width:100%;
	height:15px;
clear:both;
}

Thanks in advance.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 2 years 9 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

You're still thinking like

You're still thinking like tables. #main is fixed width at 952px so you don't need left and right shadows. Make one graphics 1012px wide (15px left shadow, 952px white, 15px right shadow), set it as the background on #main and give main 15px of left and right padding.

With table layouts you tend to make a table cell for each different thing. With div based layouts you can't because the divs won't take the same height. What you can do is nest the divs. Its not necessary in this case, but its what I would do for a variable width design that required shadows. E.g.

<div id="main">
  <div class="left_wrap">
    <div class="right_wrap">
      <div id="main_content">
        <!-- your content goes here -->
      </div>
    </div>
  </div>
</div>
 
#main .left_wrap {
  background: url(images/left-shade-10px.png) top left repeat-y; 
  padding-left: 10px;
}
#main .right_wrap {
  background: url(images/right-shade-10px.png) top right repeat-y; 
  padding-right: 10px;
}
#main_content {
  background: #fff;
}

Purists would probably disagree with all the "decorator" elements. But more often than not the designer isn't a purist web developer Wink

Top and bottom shadows can be done the same way inside of the left and right shadows, or they can be done as empty elements at the start and end of #main_content. Corners likewise where necessary. Although with corners its possibly worth investigating sliding doors method to cut down on the graphics and elements.

With fixed width and top, bottom plus vertical repeat, you can also consider optimizing your graphic, by making it 3 x width and using background position to show each third as appropriate.

AndersStudio
AndersStudio's picture
Offline
Enthusiast
Yardley, PA
Last seen: 4 years 2 weeks ago
Yardley, PA
Timezone: GMT-5
Joined: 2005-11-09
Posts: 91
Points: 6

I appreciate your

I appreciate your response.

I tried the first suggestion, which works in IE7, but not in Firefox and neither browser aligns the website in the middle of the browser.

http://bpenvservices.com/testing/index_css.html

Any ideas for centering and making the shadows appear in Firefox? Also, the white background does not seem to be working at all in Firefox because you can see some of the body background (grey) through the content boxes.

Thanks!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 2 years 9 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

I was only attempting to

I was only attempting to explain shadows.

Centering is as normal, margin-left & margin-right set to auto.
In compliant browsers floats are out of flow, blocks won't expand to surround their floated children. You need to force that some other way. Adding ...

#main {
  margin: 0 auto;
  overflow: hidden;
}

will fix both issues on this website.

Try out firebug. Hovering over an element in the html panel will highlight the space that element takes up with different colours assigned to its margins, padding and content. Then you can click on the element in code (or actual element in inspect mode) and see its style rules or switch to layout tab and see in figures space taken up by the element. A check in layout will show you #main with a height of 0.

AndersStudio
AndersStudio's picture
Offline
Enthusiast
Yardley, PA
Last seen: 4 years 2 weeks ago
Yardley, PA
Timezone: GMT-5
Joined: 2005-11-09
Posts: 91
Points: 6

Cool, thanks for the

Cool, thanks for the margin:0 auto lesson. Much appreciated.

My version of Firefox (3.0.7) will not let me enable Firebug... Nevertheless, I found that my page was accidentally setup for strict instead of transitional - this fixed the gap in Firefox between the box tops and the box fill.

Oddly, I had to give the bottom shadow a left position of -16px for it to center under the rest of the content. This is broken when I minimize the browser to about 800 pixels wide...

Also, there is a bug in Safari where my right nav image (currently positioned relatively to top:-18px sits out of place. I wonder why it is only in Safari... Any ideas for this fix?

http://bpenvservices.com/testing/index_css.html

Thanks a ton!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 2 years 9 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Firebug should work fine

Firebug should work fine with FF3.0.7. Try uninstalling it and getting a fresh copy.

Seriously, get out of the habit of using position:relative and offsets. Its never necessary.

You've misconfigured #main. It has a width of 984px + left and right padding of 16px. So it needs a background of 1016px. Or if the background width of 984px is correct, its width should be 952px.

All the decorative images should be in the background rather than in the foreground. Don't use attributes to control appearance, ie. don't use align. If the images were in the background where they belong there would be no issue.

For the navbar, its fixed width and fixed height, why are you messing around with component images? Simply create a single image. Personally, I mostly stay clear of fixed height, its a trap. You don't control the users browsers so height requirements may end up different from what you expect. This means, use top and bottom images not left and right images.

AndersStudio
AndersStudio's picture
Offline
Enthusiast
Yardley, PA
Last seen: 4 years 2 weeks ago
Yardley, PA
Timezone: GMT-5
Joined: 2005-11-09
Posts: 91
Points: 6

Uninstalling and

Uninstalling and reinstalling Firebug worked. I thought maybe I could use this to figure out why the navigation isn't centering now, but I was unsuccessful...

http://bpenvservices.com/testing/

So the reasoning for setting main to 952 is because it is the width minus the padding?! I'll take note of this for future widths... As you said, I'm sooo used to tables. I was trying to avoid making single, larger images due to file size, but I suppose a few hundred bytes is no big deal these days. Nav bar and footer are both fixed - 1 single image.

Thanks,

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 2 years 9 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

AndersStudio wrote:...I was

AndersStudio wrote:

...I was trying to avoid making single, larger images due to file size, but I suppose a few hundred bytes is no big deal these days. Nav bar and footer are both fixed - 1 single image.

Pretty much. Lots of little graphics can be worse than a few larger ones. Page loading will be more dependent on latency rather than bandwidth. I'm of the opinion that you build a page first and then if there is a problem with with page weight or responsiveness you then address that problem.

If you want the navigation to centre, make it all display inline and use text-align:center on the UL element. Plus get rid of the position:relative on the navigation list elements. If necessary, use margin-top or padding-top to adjust the spacing around the text.

AndersStudio
AndersStudio's picture
Offline
Enthusiast
Yardley, PA
Last seen: 4 years 2 weeks ago
Yardley, PA
Timezone: GMT-5
Joined: 2005-11-09
Posts: 91
Points: 6

Cool, the position:relative

Cool, the position:relative top:14px was replaced by top padding of 14px. Still needed a fix in IE, but point taken.

The display:inline and text-align:center on the ul #nav didn't center the bar...

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 2 years 9 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

The UL stays display:block

The UL stays display:block but gets the text-align:center. All its children need to be display:inline not floated. Do you see what I'm trying to achieve here?

There are two ways to centre with CSS. Block elements using margin-left/right auto and inline elements with text-align:center on their block parents. The block version only works if the width of the element will be less than its parent. But with your design you can't specify a snug fitting width to centre. That leaves inline.

You know you can center text with text-align:center. You know you can center marked up text, that is with links and bold, underline etc. So what you have to do is ensure all the element of the navigation below the outer container are inline. As soon as they are all inline, text-align will work on them.

AndersStudio
AndersStudio's picture
Offline
Enthusiast
Yardley, PA
Last seen: 4 years 2 weeks ago
Yardley, PA
Timezone: GMT-5
Joined: 2005-11-09
Posts: 91
Points: 6

Ok, I mostly understand. All

Ok, I mostly understand. All of this has been really helpful.

Now for the IE6 hacks...

    *The right padding is not showing on the right side in IE6. Rather, it is doubling up on the left side. Does this have something to do with clear?

Thanks,

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 2 years 9 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

What right padding

What right padding where?

Because things are inline you are now getting spaces turning up where there is white space in your html.

AndersStudio
AndersStudio's picture
Offline
Enthusiast
Yardley, PA
Last seen: 4 years 2 weeks ago
Yardley, PA
Timezone: GMT-5
Joined: 2005-11-09
Posts: 91
Points: 6

In IE6, the entire left side

In IE6, the entire left side of the website has double the white to the right of the shadow. The right side of the page has no white before the shadow. It looks like my padding for #main (padding:0 16px 0 16px;) is being reset as padding:0 0 0 32px;

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 2 years 9 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Its IE6 double margin bug.

Its IE6 double margin bug. You have margin-left of 16px on the three left hand elements, #header_left, #nav-bar & #leftcolumn. All these three elements are floated left which is the trigger condition. The work around is to put display:inline on the element with the problem. The better solution in this case is to remove the margin-left from those three elements (set it to Innocent and to put 16px more padding-left on #main.

AndersStudio
AndersStudio's picture
Offline
Enthusiast
Yardley, PA
Last seen: 4 years 2 weeks ago
Yardley, PA
Timezone: GMT-5
Joined: 2005-11-09
Posts: 91
Points: 6

Ah, the margin bug . I got

Ah, the margin bug Smile. I got it, thanks a ton.

You've been such a huge help, do you mind if I give you a shout-out in the CSS?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 2 years 9 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

AndersStudio wrote:Ah, the

AndersStudio wrote:

Ah, the margin bug Smile. I got it, thanks a ton.

You've been such a huge help, do you mind if I give you a shout-out in the CSS?

Will it hurt? ( I have no idea what you're talking about)

AndersStudio
AndersStudio's picture
Offline
Enthusiast
Yardley, PA
Last seen: 4 years 2 weeks ago
Yardley, PA
Timezone: GMT-5
Joined: 2005-11-09
Posts: 91
Points: 6

A shout-out means I would

A shout-out means I would include a sentence or two in CSS comments that states how you helped me through my first tableless layout.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 2 years 9 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Sure. Mention these forums

Sure. Mention these forums too. I'm not the only one who could/would provide you with help.

AndersStudio
AndersStudio's picture
Offline
Enthusiast
Yardley, PA
Last seen: 4 years 2 weeks ago
Yardley, PA
Timezone: GMT-5
Joined: 2005-11-09
Posts: 91
Points: 6

You got it. That was my

You got it. That was my plan.

Thanks again.

AndersStudio
AndersStudio's picture
Offline
Enthusiast
Yardley, PA
Last seen: 4 years 2 weeks ago
Yardley, PA
Timezone: GMT-5
Joined: 2005-11-09
Posts: 91
Points: 6

float error in IE7

My printer friendly icon appears fine in Firefox, but it is forcing a gap on a separate div column (the left side navigation) in IE 7. Any ideas for a fix? Or, is there a better way to setup the printer friendly div?

website (all code and css can be found from the here) - http://anders-studio.com/wof/content.php

Thanks

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 2 years 9 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

I'm not sure what you mean

I'm not sure what you mean by "printer friendly" - perhaps its the foreground images.

Anyway, the IE7 issue is because .nav_fill doesn't have "hasLayout". For all the gory "hasLayout" details see the excellent piece by Ingo Chao in my signature. Simple fix is to give it "zoom: 1".

AndersStudio
AndersStudio's picture
Offline
Enthusiast
Yardley, PA
Last seen: 4 years 2 weeks ago
Yardley, PA
Timezone: GMT-5
Joined: 2005-11-09
Posts: 91
Points: 6

printer friendly is

printer friendly is terminology for allowing the user to print the content from the web page that will simply include the text without graphics. Hence, friendly for the printer.

I had read the "On Having Layout" before, but still do not grasp it all. If I understand correctly, .nav_fill does not have a specified height or width, therefore the default for hasLayout is false?! The zoom:1 worked. Thanks a ton!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 2 years 9 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Pretty much you understand

Pretty much you understand correctly. height and width are the most common triggers for hasLayout in ordinary CSS. zoom is also a trigger.

AndersStudio
AndersStudio's picture
Offline
Enthusiast
Yardley, PA
Last seen: 4 years 2 weeks ago
Yardley, PA
Timezone: GMT-5
Joined: 2005-11-09
Posts: 91
Points: 6

div hidden in IE due to margin-top

Any ideas why the breadcrumb on this page is covered by the left navigation elements when viewing in IE 7?

The breadcrumb is "Home > Laboratory Services > Asbestos Laboratory > Bulk Building Materials" that is supposed to begin a few pixels in from the left, but the Asbestos Laboratory navigation panel has a margin-top that seems to be hiding the breadcrumb. I've tried z-index, but this doesn't work.

I was pressed with time and had to code this with tables a few months ago...

http://66.147.240.163/~iatlcom/content.php?page=Bulk+Building+Materials&parent=3

Thanks,

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 2 years 9 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

I think it might be time to

I think it might be time to start a new topic.