Learn VBA & Macros in 1 Week!

CSS - Body Background Image Not Aligning With Divs In Ie

Full Excel VBA Course - Beginner to Expert

Body Background Image Not Aligning With Divs In Ie	View Content

Hi All

Need some help with a positioning/alignment problem - divs not vertically aligning with body background image in IE:

http://www.flatsinbraunton.co.uk/ce/

Code:

<!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>Colin Essery Carpets</title>

<style type="text/css">

html {
	font-family:Helvetica,Arial,sans-serif;
}
body {
	font-family:Helvetica,Arial,sans-serif;
	text-align: center;
	background-image:url(images/bg-body.jpg);
	background-repeat:repeat-x;
}

#container {
   position: relative;
 	margin-left: auto;
 	margin-right: auto;
 	width: 800px;
 	text-align: left;
   }


#logo {
	position:absolute;
	left:0px;
	top:78px;
	width:327px;
	height:102px;

}
#headstrap {
	position:absolute;
	left:327px;
	top:78px;
	width:473px;
	height:102px;
}

img {
	border-style: none;
}


</style>




</head>

<body>


<div id="container">
	<div id="logo">
    	<a href="index.php"><img src="images/logo-main.gif" alt="Colin Essery Carpets - North Devon" width="328" height="102" /></a>
	</div>
	<div id="headstrap">
    	<img src="images/head-strapline.gif" alt="Colin Essery Carpets - North Devon" width="473" height="102" />
	</div>
</div><!--END CONTAINER DIV -->

</body>
</html>

Any help welcome

thanks

Rich

Full Excel VBA Course - Beginner to Expert

Body Background Image Won't Tile Under Absolute-positioned Divs

Similar Tutorials

View Content

I'm working on a pet project on the off chance that I could be hired by a small business referral organization in the city where I live, so this isn't super urgent. I'm also not a web developer by trade, more IT, so if I make any obvious mistakes, feel free to point them out.

I've got a simple absolute-positioned two-column layout and a two-color background that I want to tile vertically behind it. The problem seems to be that the browsers ( IE and FF, haven't tried chrome/safari/opera) seem to think that the body ends at the bottom of the logo I set on top, and won't tile it beyond the bottom of the image.

HTML:

Code:

<!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>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hub City Business Network | Word-Of-Mouth Business Referrals in Hattiesburg, Mississippi | Home</title>
</head>

<body>

<div id="content">

<div id="logo"><a href="index.htm"><img src="images/hcbnlogo1transparency.png" alt="Hub City Business Network" /></a></div>

<div class="left">

<div id="navigation">
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="members/index.htm">Members</a></li>
<li><a href="contact.htm">Contact Us</a></li>
</ul>
</div>

<div id="leftinfo">

<p>We meet for breakfast every Tuesday,<br /> 
7 - 8:30 AM. <br />
at the Neal House at<br /> 1311 East Hardy St.</p>

</div>

</div>

<div class="right">

<p>Hub City Business Network (HCBN), is a Hattiesburg-based business networking group that meets every Tuesday for breakfast at 7:00 till 8:30 A.M. Our membership is composed of some of the finest and best-respected business men and women in Hattiesburg. Our networking model is predicated on the idea that people do business with people they know, trust, and like. Our members know that they can confidently refer business to a member and the referral will be handled in a timely, professional manner. In addition, we encourage members to meet outside of the weekly meetings for one-on-one Strategic Marketing Sessions (SMS). An SMS usually takes the form of a lunch or coffee, and gives members time to discover in a more relaxed environment things about other members that don't surface at the regular weekly meetings.
</p>

</div>

<div id="footer">
<p>Site built by Robert Greenstreet</p>
</div>

</div>

</body>

</html>

CSS:

Code:

html
{
	width:100%;
}

#logo img
{
	margin:10px 0px 0px 20px;
	width:400px;
	height:100px;
}

img
{
	border:0px;
}

a:link
{
	color:#29497f;
}

a:visited{
	color:#5dd0c0;
}

body
{
	width:650px;
	margin-left:auto;
	margin-right:auto;
	background-color:#29497f;
}

#content
{
	/*height:500px;*/
	width:650px;
    background-image:url('../images/bg1.png');
	background-repeat:repeat-y;
	background-attachment:fixed;
	background-position:center;
	margin-top:-10px;

}

.left
{
	position:absolute;
	left:auto;
	top:120px;
	width:15em;
	margin-left:12px;
	padding-left:0px;
}

.left ul
{
	list-style-type:none;
	margin-left:-33px;
	font-family:sans-serif;

}

#leftinfo
{
	margin-left:10px;
	width:9em;
}

.right
{
	position:absolute;
	left:auto;
	top:120px;
	width:27em;
	margin-left:12em;
	font-family:sans-serif;				
}

.right p
{
	color:#000000;
}

#memberlist ul
{
    margin-left:-40px;
}

#memberlist a:visited{
    color:#6a92d4;
    text-decoration:none;
}

#footer
{
	position:absolute;
	top:400px;
	width:650px;
	margin:0 auto;
}

Also, I'm working on getting that footer centered about 30px from the bottom of the page, without running up into whatever content may be above it. I think I might be able to figure that one out on my own, though.

Like I said, no rush. This isn't a paid gig

Body Background-image Does Not Load Image Via Linking To An External Stylesheet

Similar Tutorials

View Content

Hi,

I have a question about setting up the Body background-image via a linked external stylesheet.

I have a index.html file and a myStyle.css file. I want to setup the background to load an image file, test.JPG.

When I embed the following in my index.html, I see the background show up:

** inside index.html file **
<BODY STYLE="background-image: url(test.JPG);"> blah </BODY>

BUT, when I define my background in the externally linked myStyle.css file, the background does not load:

** inside myStyle.css file **
BODY { background-image: url(test.JPG); }

** inside index.html file **
<LINK REL="stylesheet" TYPE="text/css" HREF="myStyle.css">
<BODY>
blah
</BODY>
</LINK>

Please help.

thanks!

Background Body Image Needs To Be Different Per Page

Similar Tutorials

View Content

#bg-one {
background: white url(some.png);
}

#bg-two {
background: white url(someother.png);
}
===========
...
</head>
<body id=bg-one">
...

...
</head>
<body id=bg-two">

Help W/ Body Height & Background Image

Similar Tutorials

View Content

Hello, I had a site exactly how I wanted to and messed up a css file. I am almost back to where I was but I am having an issue with the background image of the body element. Please look at this layout - Client Website . Notice how the hardwood floor does not go all the down? I have the image sized to 1500 pixels high and yesterday I did not have this issue. Also, when I outline elements in FF I see the body element seems to fall short. Any help would be appreciated. Tom

Floated Elements Disrupting Background Image Of Body?

Similar Tutorials

View Content

Hello DevShed CSS Help Forum,

I have a wierd problem (seems I have a knack for that ) with a design I'm working on. When you first go to this page there is some disruption around the two floated columns in the background image that is assigned to the body tag:

(Right now the page is only working in non-IE browsers, but I don't know any developers that regularly use IE anyways...LOL)

http://www.spidersend.com/new_site/newsite4/test6.html

However if you refresh the page or click to another tab and then back to that page it corrects itself. Once I remove the sidebar and the float property from the css on the main content area the issue is gone so it has to be something to do with that. Has anybody experienced this before?

I just find it odd that it doesn't stay messed up, but corrects itself, even if you refresh and clear the cache. Confusing and wierd.

Any ideas? Theories? Any and all ideas are much appreciated. Here is the CSS:
Code:

body
{
	background-color: #FFFFFF;
	padding: 0px;
	margin: 0px;
	font-family: "arial";
	background-image: url('images/bottom_slice.png');
	background-repeat: repeat-x;
	background-position: bottom center;
}

div#header
{
	background-image: url('images/header_slice3.png');
	background-repeat: repeat-x;
	height: 198px;
	width: 100%;
}

div#header-content
{
	width: 680px;
	margin: 0px auto;
}

div#top-navigation
{
	width: 680px;
	margin: 0px auto;
	position: relative;
	bottom: 16px;
	color: #FFFFFF;
	font-family: "arial";
	font-size: 16px;
	padding: 0px;
}

div#content
{
	width: 850px;
	float: left;
}

div#content-header
{
	background-image: url('images/content_bg_top.png');
	width: 850px;
	height: 30px;
}

div#content-footer
{
	background-image: url('images/content_bg_bottom.png');
	width:850px;
	height: 32px;
}

div#content-area
{
	background-image: url('images/content_bg_slice.png');
	padding-left: 18px;
	padding-right: 18px;
}

div#adbar
{
width: 157px;
float: right;
}

div#adbar-header
{
	background-image: url('images/sidebar_top.png');
	width: 157px;
	height: 30px;
}

div#adbar-footer
{
	background-image: url('images/sidebar_bottom.png');
	width: 157px;
	height: 26px;
}

div#adbar-area
{
	background-image: url('images/sidebar_slice.png');
	padding-left: 5px;
	padding-right: 5px;
}

div#sidebar
{
	float: right;
	clear: both;
	position: relative;
	right: 10px;
	background-color: #d2e7f0;
	width: 300px;
	-moz-border-radius: 5px;
	padding: 5px;
	margin-left: 15px;
	color: #0c577a;
}

div#sidebar2
{
	float: right;
	clear: both;
	position: relative;
	right: 10px;
	background-color: #d2e7f0;
	width: 300px;
	-moz-border-radius: 5px;
	padding: 5px;
	margin-left: 15px;
	margin-top: 20px;
	color: #0c577a;
}

div#content-wrapper
{
	width: 1007px;
	margin: 0px auto;
}

Change Body Background Colour / Image From Hover

Similar Tutorials

View Content

Hi guys,

Is it possible in CSS to change the colour / image of the page background dynamically. So that as you hovered over different links , the background of the page changed. I know you can do this in JS but how would you do it in CSS?

I was kinda thinking something like:

a.linkname:hover, a.linkname:focus body { background-color:#00FF00; }

but thats just a guess and doesnt work lol.

Many Thanks,

Alvin.

Aligning Text/image Over Background Image

Similar Tutorials

View Content

I am trying to put labels below images on my new site design. See: www.jwsuretybonds*com/jw09

I figured out how to get them vertically aligned, but I am having problems with the horizontal, as when I change the browser size, they move.

Here is one of the examples:
Code:

#homepage-bar h2.construction {
	position:fixed;
	top:225px;
	left:505px;
}

I tried changing to position: absolute; I also tried to use percentages on the left:

I know this is easy, but I can't find the fix after googling for 30 minutes. Help!

Help With Bullet Image - Aligning To Right In Addition To Background

Similar Tutorials

View Content

I've got a unordered list, with a background image on the li a:link selector. I also need to replace the default bullet with an image BUT the image needs to display to the right of the <li> text. Is this possible? The image needs to appear immedately after the text (not aligned at the edge of the list or column).

So, for example,

list item i [img]
list item 2 with longer name [img]
list time 3 with short [img]

The list is generated dynamically, I cannot simply add the image to the list item text. Any help would be much appreciated - thanks!

Background Image And Divs

Similar Tutorials

View Content

Is it possible to set a background image to a division and align it?

Divs Not Aligning To The Top

Similar Tutorials

View Content

I have a full css site that im in the mits of creating. It has 3 colums across in the main part of the site as you will see in the link below that some of my divs dont seem to be lining up w/ the top of the page...

http://www.pollutionpaintball.com/version3/dennis_wells.html

I have the first column that contains the thumbnails floating right with a margin-left of the navgition width and the profile div width.

Next I have the navigation floated left

Then I have the profile section in a div w/ a left - margin the size of the navigations width...

any pointers would help...

Aligning Two Divs Vertically

Similar Tutorials

View Content

Hi guys,

I am trying to display two forms with several elements on a page. I would like to place the two forms on the webpage so that one is displayed on the left and the other on the right of the screen.
Something like this

URL
http://craigbaldwin.com/blog/wp-content/uploads/2008/12/52.jpg

I have written the following test and the forms are placed correctly inside the left and right divs.

Code:

<HTML>
<Head>
	<style type="text/css">
		div.wrapper {
		position: relative;
		clear: both;
		width: 100%;
		border : 1px solid #000000;
		}
		div.left {
		float: left;
		width: 50%;
		background: #ffffff;
		border : 1px solid #000006;

		}	
		div.right {
		float: right;
		width: 50%;
		background: #ffffff;
		border : 1px solid #000001;
		}
		
	</style>
</Head>
<Body>
	<div class="wrapper">Wrapper
		<div class="left">Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box Left Box </div>
		<div class="right">Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box Right Box </div>
	</div>
</Body>
</HTML>

A couple of problems with the above.
1. In Internet explorer the divs are aligned correctly but in firefox it gets all messy.
2. As long as the window is maximised then i the divs are aligned vertically correctly. If i resize the browser window then they are no longer aligned vertically. Is there a way to make them always next to each other from left to right even if the window is resized? (try resizing the window for the example i showed above)

Thanks

Problem With Aligning Divs

Similar Tutorials

View Content

I have these two blocks that need to be on the same row. As it is now, they are blocked into two seperate rows. What I'm trying to achieve, is to have the logo on the far left, where it is now. But, I'd like to have the Login text to the far right, just before the tiled background (sunflowers). I'm not sure how to fix this problem. Can anyone take a quick look?

http://www.marginalspace.com/asif/index.php

Divs Not Aligning Properly

Similar Tutorials

View Content

I'm trying to recreate a header that was built using tables.

Here is an example of the original header. This is how I want it to look using div.

http://65.175.116.253/logo/html_head_p1.html

Here is the code for the table based header

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
</HEAD>

<body bgcolor="white" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
		
<basefont face="verdana">

<table width="780" height="68" border="0" cellpadding="0" cellspacing="0">
<tr> 
<td bgcolor="#004C91" align="center" valign="center" width="222"><img src="http://65.175.116.253/logo/logo.gif" width="196" height="49" hspace="10">
</td>
<td bgcolor="#004C91" align="center" valign="center" width="600">
<img src="http://65.175.116.253/logo/banner.jpg">
</td>
</tr>
</table>
</body>
</html>

Here is the header using the code with DIVs.

http://65.175.116.253/logo/styletest.html

Here is the code I have using divs. I'm confused as to how to align the images correctly in the divs... Can someone show me how to correct this? I put the style info in teh same document so it would be easier to read.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>

<style type="text/css">
#headerlogo {
background: #004C91;
position: absolute;
width: 222px; 
height: 68px;
top: 0px;
padding-left: 0px;
padding-right: 0px;
}

#headerbanner {
background: #004C91;
position: absolute;
width: 600px; 
height: 68px;
top: 0px;
padding-left: 50px;
padding-right: 0px;
}
</style>

<title>Untitled</title>

</head>


<body>
<div id="headerlogo"><img src="http://65.175.116.253/logo/logo.gif">
<div id="headerbanner"><cfinclude template="banner.cfm">


</body>
</html>

Can Someone Help Me Aligning These 2 Divs? One Isn't Working Right...

Similar Tutorials

View Content

I am trying to get these 2 divs, which are going to be acting as a "tab" off of the main layout of the page. The first one for Personal is working and displaying correctly as far as I can tell, but something is wrong with my Business one. It doesn't seem to be taking any of my styles for displaying that tab correctly, either that or the position is totally off.

If anyone could help me out I'd greatly appreciate it.

Here's the css:
Code:

/* CSS Document */
h1 {
	font-family: Geneva, Arial, sans-serif;
	font-size: 20px;
	color:#000000;
}

h2{
	font-family: Geneva, Arial, sans-serif;
	font-size: 16px;
	color:#000000;
}

h4{
	font-family: Geneva, Arial, sans-serif;
	font-size: 12px;
	color:#000000;
}

body {
	margin: 0;
	border: 0;
	background: #ededed;
}

/*============================ Begin Layout Structure ============================*/

#wrapper {
	width: 1024px;
	min-height: 768px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	background: #ffffff;
}

#accountselector-wrapper {
	position: relative;
	float: left;
	width: 100%;
	background: #ededed;
}

#accountselector-home {
	position: relative;
	float: left;
	height: 20px;
	min-width: 100px;
	line-height: 20px;
	text-align: center;
	background: #ffffff;
}

#acccountselector-business {
	position: relative;
	float: left;
	height: 20px;
	min-width: 100px;
	line-height: 20px;
	text-align: center;
	background: url("accountselectorleft.png");
}

#headerwrapper {
	position: relative;
	margin-top: 5px;
	width: 100%;
	height: 300px;
}

#headerwrapper-left {
	position: relative;
	float: left;
	min-width: 64%;
	height: 100%;
}

#headerwrapper-left-logo {
	position: relative;
	height: 75px;
	width: 100%;
	background: #ffffff;
}

#headerwrapper-left-navigation {
	position: relative;
	background: #ffffff;
	height: 25px;
	width: 100%;
	line-height: 25px;
}

#headerwrapper-left-banner {
	position: relative;
	height: 200px;
	width: 100%;
	border: thin solid #939393;
}

#headerwrapper-spacer {
	width: 12px;
	height: 100%;
	float: left;
	background: #ffffff;
}

#headerwrapper-right {
	position: relative;
	float: left;
	width: 33%;
	height: 100%;
	border: thin solid #939393;
}

#headerwrapper-right-heading {
	position: relative;
	width: 100%;
	height: 15px;
	line-height: 15px;
}

#headerwrapper-right-customer{
	position: relative;
	width: 100%;
	height: 185px;
}

#bodywrapper {
	position: relative;
	min-height: 478px;
	width: 100%;
	padding-top: 10px;
}

#bodywrapper-leftwrapper {
	position: relative;
	float: left;
	height: 100%;
	width: 20%;
}

#bodywrapper-leftwrapper-subnav {
	position: relative;
	height: 50%;
	width: 100%;
}

#bodywrapper-leftwrapper-news {
	position: relative;
	height: 50%;
	width: 100%;
}

#bodywrapper-rightwrapper {
	position: relative;
	float: left;
	height:100%;
	width: 80%;
}

#bodywrapper-rightwrapper-body {
	position: relative;
	height: 100%;
	width: 100%;
}

And the html:
Code:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="test5.css" />
</head>

<body>
<div id= "wrapper">
	<div id="accountselector-wrapper">
		<div id= "accountselector-home">Personal</div>
		<div id= "accountselector-business">Business</div>
	</div>
	
	<div id= "headerwrapper">
		<div id="headerwrapper-left">
			<div id= "headerwrapper-left-logo">US Sonet Logo</div>
			<div id= "headerwrapper-left-navigation">Link1&nbsp;&nbsp;&nbsp;&nbsp;Link2&nbsp;&nbsp;&nbsp;&nbsp;Link3</div>
			<div id= "headerwrapper-left-banner">US Sonet Banner</div>
		</div>
		<div id= "headerwrapper-spacer">&nbsp;</div>
		<div id="headerwrapper-right">
			<div id="headerwrapper-right-heading">Manage My Account</div>
			<div id="headerwrapper-right-customer">Account Control Center</div>
		</div>			
	</div>	
	<div id="bodywrapper">	
		<div id="bodywrapper-leftwrapper">
			<div id="bodywrapper-leftwrapper-subnav"><p>Link1</p><p>Link2</p><p>Link3</p></div>
			<div id="bodywrapper-leftwrapper-news" >News</div>
		</div>
		<div id="bodywrapper-rightwrapper">
			<div id="bodywrapper-rightwrapper-body">
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque 
				adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque 
				penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam 
				libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor 
				cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
				pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque 
				in dui. In eget elit. Praesent eu lorem.</p>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque 
				adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque 
				penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam 
				libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor 
				cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
				pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque 
				in dui. In eget elit. Praesent eu lorem.</p>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque 
				adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque 
				penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam 
				libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor 
				cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
				pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque 
				in dui. In eget elit. Praesent eu lorem.</p>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque 
				adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque 
				penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam 
				libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor 
				cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
				pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque 
				in dui. In eget elit. Praesent eu lorem.</p></div>
		</div>		
	</div>
</div>

</body>
</html>

Thanks

Horizontally Aligning Two Divs

Similar Tutorials

View Content

I need help aligning the flash block to the right of my site to the one on the left so that they are both on the same line.

gpostal.net is the website so you can see the flash blocks. See how one is at the bottom right? I'm trying to get that to the top right and closer to the one on the left.

Ie Problems W/ Aligning Divs

Similar Tutorials

View Content

My site lines up fine on Firefox. However, when it loads on IE, my right most part of the page does not align properly. You can see my problem at dicebaseballdotorg. Any ideas or suggestions?

Divs Bleeding Together /h2's Not Aligning In Ff

Similar Tutorials

View Content

I camped out this weekend and worked all day and night to build one of the more advanced forms that I need. I am really pleased with the results so far, at least in IE. It is not perfect. I am having some problems with how it looks in FireFox.

It looks great in IE. However, in Firefox, you can see the sections are bleeding together. Each is in it's own DIV set as BLOCK.

The sections are

Core
Details
Features
Description
Contact/Shipping/Payment
Promotion

Brief example

<div>
<h2>Core</h2>
content bla bla bla
</div>

<div>
<h2>Details</h2>
content bla bla bla
</div>

The H2 headers, the text is bleeding into the div of the section before it. In IE, it doesn't. in FF, it's all jumbled up.

Here's a link to an .html file of the form. It should open up in any browser since it references CSS by url and graphics by url. Can anybody check and see if it is a quick fix? I'm not sure what the problem is. I don't have any extra cash at the moment so I'm stuck. I've been trying to figure out the problem all weekend to no avail.

http://quotes.cybercon.net/classifiedsform.html

Also, here are two pics. Screenshots from IE and FF. In the IE screenshot, you can see how I outlined each section. The H2 headline tag (core/details/description/feature) is bleeding into the previous section.

http://quotes.cybercon.net/classifiedformIE.jpg
http://quotes.cybercon.net/classifiedformFF.jpg

Thanks!

-Jason

Aligning Divs Vertically.... Should Be Simpler?

Similar Tutorials

View Content

I'm wworking on a CSS template and I'm trying to vertically align two divs.... one on top of the other with a five pixel margin between the two....

However, unless I use a bunch of HTML breaks (which will result in an uneven template), I can't figure out how to do it. I've tried to vertical-align them and etc. Any help is appreciated.

Oh, I know my code could be a bit more clean, this is just a comp.

I've also tested this on FF so far. I doubt IE will return favourable results either.

My example:

www.efacln.com/Untitled-1.html

My CSS code:

Code:

#container
{
	MARGIN: 5px;
}

#header_container
{
	border-color: black;
	BORDER-STYLE: solid;
	BORDER-WIDTH: thin;
	BORDER-LEFT: none;
	BORDER-RIGHT: none;
	
	WIDTH: 100%; 
}

#header_content
{
	BORDER-COLOR: black;
	BORDER-STYLE: solid;
	BORDER-WIDTH: thin;
	BORDER-TOP: none;
	BORDER-BOTTOM: none;
	
	WIDTH: 600px;
	HEIGHT: 100px;
	
	MARGIN-LEFT: auto;
	MARGIN-RIGHT: auto;
}

#kirk_news
{
	BORDER-COLOR: black;
	BORDER-STYLE: solid;
	BORDER-WIDTH: thin;
	
	WIDTH: 550px;
	HEIGHT: 100px;
	
	FLOAT: left;
	
	POSITION: absolute;
	
	MARGIN-TOP: 5px;
	MARGIN-RIGHT: 2.5px;
}

#navigationblock
{
	BORDER-COLOR: black;
	BORDER-STYLE: solid;
	BORDER-WIDTH: THIN;
	
	WIDTH: 410px;
	
	POSITION: relative;
	
	FLOAT: RIGHt;
	
	MARGIN-TOP: 5px;
	MARGIN-LEFT: 2.5px;
	
}

#scott_news
{
	BORDER-COLOR: black;
	BORDER-STYLE: solid;
	BORDER-WIDTH: thin;
	
	width: 410PX;
	
	MARGIN-TOP: 1 px;
	MARGIN-TOP: 5px;
}

</STYLE>

Width Overspills Screen, Help Aligning Divs

Similar Tutorials

View Content

Hang on to this post, I have found a couple of answers, so will post again when i get stuck!

Charlie

Body Background

Similar Tutorials

View Content

Hi all,
I would like to be able to have the body background change when moving from page to page.
Is it possible, without javascript.

Code:

body {
    margin: 0px;
    padding: 5px 0px 5px 0px;
	background: url(blue2.jpg) fixed;
} {

Specifically the surrounding blue2.jpg that frames the page.

page link

css link

Thanks.