Viper23 Posted July 30, 2008 Share Posted July 30, 2008 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. Link to comment Share on other sites More sharing options...
Natechs Posted July 30, 2008 Share Posted July 30, 2008 Can we see your code/CSS? Link to comment Share on other sites More sharing options...
Viper23 Posted July 30, 2008 Author Share Posted July 30, 2008 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. Link to comment Share on other sites More sharing options...
Natechs Posted July 30, 2008 Share Posted July 30, 2008 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. Link to comment Share on other sites More sharing options...
Viper23 Posted July 30, 2008 Author Share Posted July 30, 2008 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. Link to comment Share on other sites More sharing options...
Ingolme Posted July 30, 2008 Share Posted July 30, 2008 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. Link to comment Share on other sites More sharing options...
Viper23 Posted July 30, 2008 Author Share Posted July 30, 2008 The middle is all an image. (White Box) Link to comment Share on other sites More sharing options...
Ingolme Posted July 30, 2008 Share Posted July 30, 2008 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> Link to comment Share on other sites More sharing options...
Viper23 Posted July 30, 2008 Author Share Posted July 30, 2008 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? Link to comment Share on other sites More sharing options...
Ingolme Posted July 30, 2008 Share Posted July 30, 2008 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; Link to comment Share on other sites More sharing options...
Viper23 Posted July 30, 2008 Author Share Posted July 30, 2008 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. Link to comment Share on other sites More sharing options...
rzea Posted July 30, 2008 Share Posted July 30, 2008 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; } Link to comment Share on other sites More sharing options...
Viper23 Posted July 30, 2008 Author Share Posted July 30, 2008 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. Link to comment Share on other sites More sharing options...
Viper23 Posted December 22, 2008 Author Share Posted December 22, 2008 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. Link to comment Share on other sites More sharing options...
uaintgotthisid Posted December 22, 2008 Share Posted December 22, 2008 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. Link to comment Share on other sites More sharing options...
Viper23 Posted December 22, 2008 Author Share Posted December 22, 2008 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. Link to comment Share on other sites More sharing options...
Jerry62704 Posted December 22, 2008 Share Posted December 22, 2008 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). Link to comment Share on other sites More sharing options...
Viper23 Posted December 22, 2008 Author Share Posted December 22, 2008 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. Link to comment Share on other sites More sharing options...
Jerry62704 Posted December 22, 2008 Share Posted December 22, 2008 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. Link to comment Share on other sites More sharing options...
Viper23 Posted December 24, 2008 Author Share Posted December 24, 2008 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. Link to comment Share on other sites More sharing options...
Jerry62704 Posted December 29, 2008 Share Posted December 29, 2008 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. Link to comment Share on other sites More sharing options...
Viper23 Posted December 29, 2008 Author Share Posted December 29, 2008 No, I do not have a link. I am trying to make the site, and then see about getting the domain name for it. Link to comment Share on other sites More sharing options...
Jerry62704 Posted December 29, 2008 Share Posted December 29, 2008 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. Link to comment Share on other sites More sharing options...
Viper23 Posted December 29, 2008 Author Share Posted December 29, 2008 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. Link to comment Share on other sites More sharing options...
Viper23 Posted January 30, 2009 Author Share Posted January 30, 2009 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 } Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.