Jump to content

Browser Problems

eerabbit

By eerabbit
in CSS

Recommended Posts

eerabbit Newbie

eerabbit

Posted
Posted

I really don't know why this is happening. Everything was working fine and I don't know what I did, but there are strange problems everywhere now.Please take a look hereIn Chrome, everything works except the link effects.In Safari, only the navigation link effects don't show.In Firefox, the navigation list on the left is aligned incorrectly (the margin is huge).In Netscape and Mozilla, there is the same problem as in Firefox, plus a strange "flash" every time I hover over a link.In Opera, it's perfect!In IE, there are scrollbars on the two side panels because the pictures have a space on the bottom that I can't get rid of.I don't even know which one to use as a standard to base corrections on, because usually all the browsers (with the exception of IE, of course) show the same thing.css:

html, body {background: #000000;margin: 0px;padding: 0px;min-width: 940px;font: 12px georgia;color: #656565;text-align: left;}p {margin-right: 10px;margin-left: 10px;}.top {margin-left: 390px;margin-right: 20px;}h1 {font: 300 small-caps 21px "century gothic";color: #4e9c93;margin: 10px;}h2 {font: 500 small-caps 22px "century gothic";color: #bf6e04;margin-left: 390px;}h3 {font: 300 small-caps 18px "century gothic";color: #b7b7b7;margin: 15px;}ul.left li {margin-left: 110px;list-style-type: square;color: #656565;}ul.right li {margin-left: -5px;list-style-type: circle;color: #656565;}ul.list li {margin-left: 0px;margin-right: 10px;list-style-type: disc;color: #656565;}img {border: 0;padding: 0px;}a:link, a:active, a:visited {color: #d5c986;text-decoration: none;}a:hover {font-style: oblique;text-decoration: none;}a.nav:link, a.nav:active, a.nav:visited {font: 13px "century gothic";color: #b37320;text-decoration: none;line-height: 140%;}a.nav:hover {background-color: #39726c;color: #d5c986;border-bottom: 4px solid #3b3b3b;}.clear {clear: both;}#banner {background: URL(images/head.jpg) no-repeat left center;border-right: 1px dotted #575757;width: 940px;height: 211px;margin-top: 50px;float: left;}#left {background: URL(images/headtop.jpg) repeat-x top left;height: 211px;width: 50%;padding-right: 470px;margin: 50px -940px 0px 0px;float: left;}#right {background: URL(images/headbot.jpg) repeat-x bottom left;height: 211px;width: 50%;padding-left: 470px;margin: 50px 0px 0px -941px;float: left;}#leftb {height: 391px;width: 50%;padding-right: 470px;margin: 50px -940px 0px 0px;float: left;}#rightb {height: 391px;width: 50%;padding-left: 470px;margin: 50px 0px 0px -940px;float: left;}.break {width: 15px;height: 391px;margin-top: 50px;float: left;}.content {width: 304px;height: 391px;border-top: 1px solid #cf8161;border-bottom: 1px solid #4e9c93;margin-top: 50px;float: left;overflow: auto;}

example html for a page:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"   "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>Rhapsodic __Arron Yan</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><link rel="stylesheet" href="arron.css" type="text/css"></head><body><div id="left"></div><div id="banner"><h2>Welcome to Rhapsodic</h2><p class="top">an approved fanlisting for Arron Yan under the Musicians: Male category. He is the most talented (blatant favoritism, I know) member of the band Fahrenheit. He's not just another pretty face in another typical boyband. The kid's got some talent! <br><br>If you also adore Arron's musical skills, then join the fanlisting!</p></div><div id="right"></div><div class="clear"></div><div id="leftb"></div><div class="content"><img src="images/left.jpg" align="left" alt=""><h1 align="right">Information</h1><p><ul class="left"><li><a href="index.php?about" class="nav">Site & Fanlist</a></li><li><a href="index.php?arron" class="nav">Who is Arron?</a></li><li><a href="index.php?rules" class="nav">Simple rules for joining</a></li><li><a href="index.php?codes" class="nav">Declare your love!</a></li><li><a href="index.php?join" class="nav">Join the masses</a></li><li><a href="index.php?update" class="nav">Update info</a></li><li><a href="index.php" class="nav">Index</a></li></ul></p></div><div class="break"></div><div class="content"><h1 align="center">Stats</h1><p><?php include 'config.php';	  include ENTH_PATH . 'show_stats.php'; ?></p></div><div class="break"></div><div class="content"><img src="images/right.jpg" align="right"><h1 align="left">Affiliates & Links</h1><p><?php include 'config.php';	  include ENTH_PATH . 'show_affiliates.php'; ?></p></div><div id="rightb"></div></body></html>

What should I do?

Link to comment
Share on other sites
alexnofue Member

alexnofue

Posted
Posted

Hi, the list to left has a huge margin, i don't know if this was intended this way but maybe this is a reason for a problemul.left li {margin-left: 110px; <-- change it to a smaller numberlist-style-type: square;color: #656565;}also there are different elements with similar names:<div id="left"></div><ul class="left">the browser might have them apart but it makes more difficult to read the code, meaning more problem for the reader.as an advice you can try using a more "general" css rules, like this:.center{text-align: center;}.left{text-align: left;}.right{text-align: right;}this can be used in several tags (this doesn't align contained tables, needs something else) like the ones in your code:<h1 align="right">Information</h1><h1 align="center">Stats</h1><h1 align="left">Affiliates & Links</h1>hope this helps.

Link to comment
Share on other sites
Jerry62704 Member

Jerry62704

Posted
Posted
I really don't know why this is happening. Everything was working fine and I don't know what I did, but there are strange problems everywhere now.Please take a look hereIn Chrome, everything works except the link effects.In Safari, only the navigation link effects don't show.In Firefox, the navigation list on the left is aligned incorrectly (the margin is huge).In Netscape and Mozilla, there is the same problem as in Firefox, plus a strange "flash" every time I hover over a link.In Opera, it's perfect!In IE, there are scrollbars on the two side panels because the pictures have a space on the bottom that I can't get rid of.What should I do?
1. fix the errors in your htlm (W3C Validator)2. you have multiple <h1> tags - one to a page please.3. Alexnofue gave the FF fix for the list.4. Simplify. 5. consider changing the fixed spacing with "em" to allow user size changing.The spacing in IE might be due to the <p> around the <ul>. You don't want that anyway so ditch it.
Link to comment
Share on other sites
eerabbit Newbie

eerabbit

Posted
  • Author
Posted

edit #2: I changed the order of my css a bit, and most of the problems are solved (or small enough that it doesn't affect the layout as a whole). EXCEPT the stupid IE problem with the extra spacing at the bottom. The right side was fixed earlier, but now it's not working again. I can't seem to fix this to save my life. Any thoughts?Thanks again.----------------------------------------------------edit: okay, the left list is (mostly) fixed now. I had to set the position to 'inside'. =P the margin is still a bit different in each browser though.and I just discovered a new problem. When I first view it in Safari, the index page is fine, but if I click a link, the whole thing goes nuts. But if I refresh it a few times, then it's fine again. Anyone know why that's happening?Thanks (:-----------------------------------------------------

Hi, the list to left has a huge margin, i don't know if this was intended this way but maybe this is a reason for a problemul.left li {margin-left: 110px; <-- change it to a smaller numberlist-style-type: square;color: #656565;}
The thing is, it only shows up funky in certain browsers. In Chrome, Opera, and IE, it's aligned correctly, so if I make the number smaller, then the list goes on top of the image.I'm guessing the problem is that FF is spacing it 110px right of the image, not the div itself..@Jerry 62704:1. I validated as much of the code as I could. The rest of the errors come from a script I'm running.2. I didn't know you could only use one h1 per page O_o What about h2 or h3's?3. Like I said above, if I change that, then it screws up in other browsers.4. I've been trying desperately, but I don't know have anything that I can take out that'll still render the site correctlyI took out the <p> around the <ul> but the space is still there in IE on the left side. The right side is fixed though.
Link to comment
Share on other sites
Jerry62704 Member

Jerry62704

Posted
Posted
@Jerry 62704:1. I validated as much of the code as I could. The rest of the errors come from a script I'm running.2. I didn't know you could only use one h1 per page O_o What about h2 or h3's?3. Like I said above, if I change that, then it screws up in other browsers.4. I've been trying desperately, but I don't know have anything that I can take out that'll still render the site correctlyI took out the <p> around the <ul> but the space is still there in IE on the left side. The right side is fixed though.
The idea of <hx> tags is to put your page into a logical whole. Think of your page as an outline. The top item would be the <h1> and then each section would be an <h2>. If a section needed to be divided, then you add <h3>s and so on until you resolve it or you have a page that is too complicated (more than 6 nesting levels).I would make the image a float inside of the div. Then add the list so it will be to the right and not need a lot of spacing to clear the image. That eliminates several problems of spacing across all browsers.
Link to comment
Share on other sites
eerabbit Newbie

eerabbit

Posted
  • Author
Posted

you mean make another div? like 

#imgleft {background: URL(images/left.jpg) no-repeat left center;height: #;width: #;float: left;}

and add it to: 

<div class="content"><div id="imgleft"></div><h2 align="right">Information</h2><ul class="left">LIST HERE</ul></div>

?because that's what I did, and the space is still there.I also tried making a div class that has only float: left, and applying it to the image, but that doesn't work either

Link to comment
Share on other sites
Jerry62704 Member

Jerry62704

Posted
Posted
you mean make another div? like 
#imgleft {background: URL(images/left.jpg) no-repeat left center;height: #;width: #;float: left;}

and add it to: 

<div class="content"><div id="imgleft"></div><h2 align="right">Information</h2><ul class="left">LIST HERE</ul></div>

?because that's what I did, and the space is still there.I also tried making a div class that has only float: left, and applying it to the image, but that doesn't work either

You can't float the image because it is an inline object. But you can change it to a block object and float it then. I would make it a div. You can float it left or you can make the rest of the stuff a div and float it left. My machine is swamped (upgrading service packs) so I can't work with it right now.BTW, when replying, hit the reply button right below the post and not the one at the bottom of the page.
Link to comment
Share on other sites
eerabbit Newbie

eerabbit

Posted
  • Author
Posted
You can't float the image because it is an inline object. But you can change it to a block object and float it then. I would make it a div. You can float it left or you can make the rest of the stuff a div and float it left. My machine is swamped (upgrading service packs) so I can't work with it right now.BTW, when replying, hit the reply button right below the post and not the one at the bottom of the page.
Turns out I had to float both the image and the list and make them block objects too.Thanks for all your help (:
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...