Css (Div Style Help)

[Viper23]

I have made a design using DIV (Never made one that worked right.) It works right in Internet Explorer but not in Mozilla Firefox.Here are the pictures of them. Any help or ideas how to fix it.

[Natechs]

Can we see your code/CSS?

[Viper23]

Html Code

<!-- Begin Container -->   <div id="container">   	<!-- Begin Logo Area -->	<div id="logo"></div>	<!-- End Logo Area -->	<!-- Begin Left Area -->	<div id="left">		 <!-- Begin Navigation Column -->	 <div id="navigation_column_title">	  <li><h4>Navigation</h4></li>	 </div>	 <div id="navigation_column">	  <li><a href="index.html">Home</a></li>	  <li><a href="portfolio.html">Portfolio</a></li>	  <li><a href="about.html">About Us</a></li>	  <li><a href="contact.html">Contact Us</a></li>	 </div>	 <div id="service_navigation_column_title">	  <li><h4>Services</h4></li>	 </div>	 <div id="service_navigation_column">	  <li><a href="designing.html">Web Designing</a></li>	  <li><a href="re-design.html">Re-Design</a></li>	  <li><a href="hosting.html">Web Hosting</a></li>	  <li><a href="maintenance.html">Maintenance</a></li>	 </div>	 <!-- End Navigation Column -->	 	</div>	<!-- End Left Area -->		<!-- Begin Middle Area -->	<div id="middle">	 Test<br /><br /><br /><br />	</div>	<!-- End Middle Area -->   	<!-- Begin Footer Area -->	<div id="footer"></div>	<!-- End Footer Area -->   </div>

Css Code

body { background-color: #435478; color: #000000; margin: 0px }img { border: 0px }/* Container */div#container { background-image: url('images/middle.jpg'); background-repeat: repeat x; width: 720px }/* Footer Area */div#footer { background-image: url('images/footer.jpg'); background-repeat: no repeat; height: 75px; width: 720px }/* Logo Area */div#logo { background-image: url('images/logo.jpg'); background-repeat: no repeat; height: 88px; width: 720px }/* Left Area */div#left { float: left; width: 166px }div#left div#navigation_column { text-align: left }div#left div#navigation_column li a { color: #C8E7FF; display: block; padding-bottom: 3px; padding-left: 10px; text-decoration: none; width: 150px  }div#left div#navigation_column li a:hover { background-color: #424B61; color: #FF7E00; text-decoration: none }div#left div#navigation_column_title { text-align: left }div#left div#navigation_column_title h4 { color: #FFFFFF; padding-left: 7px; padding-top: 8px; width: 151px }div#left div#navigation_column_title li { }div#left div#service_navigation_column { text-align: left }div#left div#service_navigation_column li a { color: #C8E7FF; display: block; padding-bottom: 3px; padding-left: 10px; text-decoration: none; width: 150px  }div#left div#service_navigation_column li a:hover { background-color: #424B61; color: #FF7E00; text-decoration: none }div#left div#service_navigation_column_title { text-align: left }div#left div#service_navigation_column_title h4 { border-top: #FFFFFF dotted 1px; color: #FFFFFF; padding-left: 7px; padding-top: 4px; width: 151px }div#left div#service_navigation_column_title li { }li { list-style: none }/* Middle Area */div#middle { margin-left: 5px; width: 553px }

After trying to add some content to it, the content was not aligned at the top. I moved it to tables until I can get some help with the div part.

[Natechs]

Have you tried toying with the height property? In your site folder on your computer, name a folder Firefox Quirks and put copies of all your files into that folder and start messing with the underlying code.

[Viper23]

I can try that. Like I said I have never really messed with the whole DIV coding before. More of a tables kind of coder. I just have trouble with that and is a little easier to fix.

[Ingolme]

One of the first problems I see is missing hyphens in your background-repeat properties: no repeat, repeat x. It should be no-repeat and repeat-x.It's probably not the root of your problem.I can't see where the white box is coming from, none of your HTML or CSS has any code to display a white box in the middle, so I wouldn't know why it's not working, since I don't see any code for it.

[Viper23]

The middle is all an image. (White Box)

[Ingolme]

This might be giving you trouble:

	 <div id="navigation_column">	  <li><a href="index.html">Home</a></li>	  <li><a href="portfolio.html">Portfolio</a></li>	  <li><a href="about.html">About Us</a></li>	  <li><a href="contact.html">Contact Us</a></li>	 </div>

You need <ul> tags

	 <ul id="navigation_column">	  <li><a href="index.html">Home</a></li>	  <li><a href="portfolio.html">Portfolio</a></li>	  <li><a href="about.html">About Us</a></li>	  <li><a href="contact.html">Contact Us</a></li>	 </ul>

[Viper23]

Ok, it moved it over a little to much. The background-repeat part was find, adding the - to it didn't make the middle work unless I did something wrong.Is there a place where I could learn the whole DIV?

[Ingolme]

Hmm, I just don't know exactly how the page is working. I keep looking through the code and I don't entirely get it.Just to help, I'd add this to your #footer: clear: both;

[Viper23]

The links work fine in Internet Explorer but not in FireFox, Opera, Safari. The content isn't working right in any of them. It's either in the middle at top or at the bottom. If I can't get it to work then I guess I might just try to make it into an image and just use it that way.

[rzea]

Right before the closing tag of the #footer, use this code:HTML:

<!-- End Footer Area -->   <div class="clear"></div>   </div>

CSS:

div.clear { clear:both; }

[Viper23]

How would I go about getting the content to align at the top? I have the site done using tables but would like to use the DIV's.

[Viper23]

I have another question that deals with this topic. I have taken two screenshots of what I would like it to look like.I am trying to make a website using DIV. The only problem I am currently having at the time is with the navigation links. How would I go about making them working using DIV. (Note: These are not roll over images, but regular links.)Normal:Over:The code work is what I am having the trouble with, and I do not have any code to give for this sorry.

[uaintgotthisid]

Viper use roll over images in conjunction with regular links. The most common way to do this is to make an image of each individual button, and then in the same image a version of the button which has been rolled over. You then use "background-position" in your css to adjust the image to the rolled over position.i.e.a {background: url(images/image.gif)}a.hover {background: url(images/image.gif); background-position-top: 10px}So you can see for each link you have the background image "image.gif". When you hover on the "a" element (i.e. your link) it will move the image 10px from the top. You would usually not want to apply this to all links when hovered over so you should probably add a class to it.i.e. .menu a a {background: url(images/image.gif)}.menu a.hover {background: url(images/image.gif); background-position-top: 10px}with your html being<div class="menu"> <a href="home.html">Home</a></div>Sorry it's not very clear if you're still confused message me.

[Viper23]

Would there be any way I could make the links without using roll over images? I do have images for the background and the hover, but that is in the coding I was trying to use. Getting the code to work right using DIV is the only problem I am currently having.Thanks for your help.

[Jerry62704]

You make menus using <ul>, not <div>. That would hold the <ul> tag, however. It would look like this:<div id="yourMenu"> <ul> <li><a href="#">Choice 1</a></li> <li><a href="#">Choice 2</a></li> </ul></div>You would use css to style it (eliminate the list style for example)<style type="text/css">ul {list-style-type: none}</style>If you wanted a horizonal menu, just add a style to the <li> (like float:left).

[Viper23]

Would there be any way to make the links a certain with and have an image hover when your mouse rolls over it with this type of coding?I have it working right using tables, but I would like to try and make it using DIV type coding if at all possible.I thank you all for your help with this.

[Jerry62704]

Would there be any way to make the links a certain with and have an image hover when your mouse rolls over it with this type of coding?I have it working right using tables, but I would like to try and make it using DIV type coding if at all possible.I thank you all for your help with this.

Yes. You have to put the width in the css. You have the hover there as well. It's a little more tricky (you have a span that is invisible until the link is rolled over and then css makes it visible). Going home now, however. Someone that is in a later time zone might jump in.

[Viper23]

I was wondering if anyone might be able to explain to me how come I am getting a gap between images in Mozilla Firefox and Safari and probably Opera with my coding.HTML Code

<body>  <center>   <div name="logo"><img src="images/logo.jpg" /></div>      <div id="middle">   	<div id="nav" name="navigation">	 <ul>	  <li><a href="index.html">Home</a> | </li>	  <li><a href="designing.html">Designing</a> | </li>	  <li><a href="redesign.html">Redesign</a> | </li>	  <li><a href="hosting.html">Hosting</a> | </li>	  <li><a href="maintenance.html">Maintenance</a> | </li>	  <li><a href="portfolio.html">Portfolio</a> | </li>	  <li><a href="profile.html">Company Profile</a> | </li>	  <li><a href="contact.html">Contact</a></li>	 </ul>	</div>		<div name="content"></div>	   </div>      <div id="footer">	<div name="copyright/links"></div>   </div>  </center> </body>

CSS Code

/* CSS Document */body { background-color: #E3C998; background-image: url('images/bg.jpg'); background-position: center; background-repeat: repeat-y; color: #948059; margin: 6px }img { border: 0px }/* Layout */div#footer { background-image: url('images/footer.jpg'); background-repeat: no-repeat; height: 75px; width: 750px }div#middle { background-image: url('images/middle.jpg'); background-repeat: repeat-y; height: 300px; width: 750px }div#nav { font-size: 17px; padding-left: 15px }ul { list-style: none }li { float: left }li a { color: #776238; text-decoration: none }li a:hover { text-decoration: underline }

It works and looks find in Internet Explorer, just bothering me why it's messing up in Mozilla Firefox and Safari and probably Opera.Thanks for the help.

[Jerry62704]

I was wondering if anyone might be able to explain to me how come I am getting a gap between images in Mozilla Firefox and Safari and probably Opera with my coding.HTML Code

<body>  <center>   <div name="logo"><img src="images/logo.jpg" /></div>      <div id="middle">   	<div id="nav" name="navigation">	 <ul>	  <li><a href="index.html">Home</a> | </li>	  <li><a href="designing.html">Designing</a> | </li>	  <li><a href="redesign.html">Redesign</a> | </li>	  <li><a href="hosting.html">Hosting</a> | </li>	  <li><a href="maintenance.html">Maintenance</a> | </li>	  <li><a href="portfolio.html">Portfolio</a> | </li>	  <li><a href="profile.html">Company Profile</a> | </li>	  <li><a href="contact.html">Contact</a></li>	 </ul>	</div>		<div name="content"></div>	   </div>      <div id="footer">	<div name="copyright/links"></div>   </div>  </center> </body>

CSS Code

/* CSS Document */body { background-color: #E3C998; background-image: url('images/bg.jpg'); background-position: center; background-repeat: repeat-y; color: #948059; margin: 6px }img { border: 0px }/* Layout */div#footer { background-image: url('images/footer.jpg'); background-repeat: no-repeat; height: 75px; width: 750px }div#middle { background-image: url('images/middle.jpg'); background-repeat: repeat-y; height: 300px; width: 750px }div#nav { font-size: 17px; padding-left: 15px }ul { list-style: none }li { float: left }li a { color: #776238; text-decoration: none }li a:hover { text-decoration: underline }

It works and looks find in Internet Explorer, just bothering me why it's messing up in Mozilla Firefox and Safari and probably Opera.Thanks for the help.

Do you have a link? Your code is missing important parts, such as the DOCTYPE.

[Viper23]

No, I do not have a link. I am trying to make the site, and then see about getting the domain name for it.

[Jerry62704]

No, I do not have a link. I am trying to make the site, and then see about getting the domain name for it.

You clicked the bottom response tab for your message. Better would have been to hit the "Reply" on my message as it would be in the outline of messages rather than below and to the left of my message. Just sayin...Post the full code, including the DOCTYPE so we can reproduce it on our machines.

[Viper23]

You clicked the bottom response tab for your message. Better would have been to hit the "Reply" on my message as it would be in the outline of messages rather than below and to the left of my message. Just sayin...Post the full code, including the DOCTYPE so we can reproduce it on our machines.

I looked at it and the problem that I saw was with the <ul> coding. It was leaving a gap between the logo and the links. When I removed the <ul> it fixed it. However, I do not have the coding anymore. Well the DOCTYPE was I think <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">, but I am not certain.

[Viper23]

Okay, I'm working on a web site and trying to use DIV, however, in FireFox the middle will not expand any, and it is only a color background. Is there any way that I can get this to work where it will expand without me setting a height setting?HTML Coding:

<!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>  <title>MLH Web Designs</title>        <link href="nav.css" rel="stylesheet" type="text/css" />  <link href="style.css" rel="stylesheet" type="text/css" />    <!-- Meta -->  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     </head> <body>  <div id="wrapper">     <div id="logo"><img src="images/logo.jpg" /></div>      <div id="content">Test</div>	   <div id="nav">	<div id="odd"><a href="index.html">Home</a></div>	<div id="even"><a href="mlh_designing.html">Web Designing</a></div>	<div id="odd"><a href="mlh_hosting.html">Web Hosting</a></div>	<div id="even"><a href="mlh_maintenance.html">Maintenance</a></div>	<div id="odd"><a href="mlh_portfolio.html">Portfolio</a></div>	<div id="even"><a href="mlh_profile.html">Company Profile</a></div>	<div id="odd"><a href="mlh_contact.html">Contact Us</a></div>   </div>	   </div>  <div id="footer">	<div class="footer">© 2009 MLH Web Designs. All Rights Reserved.</div>   </div> </body></html>

CSS 1 Coding:

@charset "utf-8";/* CSS Document */body { background-color: #E1E1E1; color: #000000; font: 16px Calibri; margin: 0px }img { border: 0px }/* This is to control the positioning of the layout */#wrapper { background-color: #FFFFFF; border-left: #000000 solid 1px; border-right: #000000 solid 1px; border-top: #000000 solid 1px; height: 100%; margin: 0 auto; width: 700px }/* This is to control the height and/or width of the logo */#logo { height: 118px; width: 700px }#content { float: right; padding-left: 5px; width: 545px }/* This is to control the height and/or width of the footer */#footer { background: url('images/footer.jpg') no-repeat; height: 91px; margin: 0 auto; width: 702px }/* This is to control the font and padding for the text in the footer */.footer { font: 12px Calibri; padding-left: 5px; padding-top: 10px }

CSS 2 Coding:

@charset "utf-8";/* CSS Document *//* This is to control the navigation */#nav { background: url('images/nav.jpg') no-repeat; float: inherit; font: 17px Calibri; height: 218px; margin-left: 3px; width: 147px }/* Navigation */div#nav div#even a { color: #18716A; display: block; height: 25px; padding-left: 8px; padding-top: 6px; text-decoration: none; width: 139px }div#nav div#even a:hover { text-decoration: underline }div#nav div#odd a { color: #EBEBEB; display: block; height: 25px; padding-left: 8px; padding-top: 6px; text-decoration: none; width: 139px }div#nav div#odd a:hover { text-decoration: underline }