Problems with CSS and firefox

Discussion in 'CSS' started by rodneygru, Feb 29, 2008.

  1. #1
    Hi Folks,

    I design a Website that not work well with firefox and css....With IE 7 works fine.

    The address is www.acquaticaguarulhos.com.br . Can someone help me?

    Thanks.
     
    rodneygru, Feb 29, 2008 IP
  2. matthewbeckman

    matthewbeckman Peon

    Messages:
    140
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #2
    You have quite a mess on your hands... I am guessing you are not coding this by hand, but are using some type of website creation tool? There seems to be a lot of stuff right away that doesn't need to be there... First off I would check all of your pages and run them through the W3 validation tool. That is a good place to start, because all of your pages should validate properly, there isn't any reason they shouldn't.

    http://validator.w3.org/check?uri=www.acquaticaguarulhos.com.br&charset=%28detect+automatically%29&doctype=Inline&group=0

    Looking at your html a little closer, it really needs to be cleaned up. It is very bloated if you ask me. I would really suggest including it's own style.css along with the layout.css you already included. Speaking of which... why are there blank properties for some things in your embedded CSS? And why the hell may I ask do you have an id for your <head>??

    Also, things tend to get very confusing when you start mixing tables and CSS... this site could easily be done with pure CSS and would really cut down on the amount of HTML needed. Now while I don't know a whole lot about javascript, there seems to be an awfully lot there for what you really need it for.
     
    matthewbeckman, Feb 29, 2008 IP
  3. matthewbeckman

    matthewbeckman Peon

    Messages:
    140
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Here just to get you an idea what I was talking about here. Below is what you have on your site now.
    
    <!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 id="ctl00_Head1"><title>
    	Acquática Guarulhos
    </title><link href="layout.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript">
        function onOk() {
         window.location="index.aspx"; //redireciona para a página.
        }
    </script>
    <style type="text/css">
    	.ctl00_menu1_0 { background-color:white;visibility:hidden;display:none;position:absolute;left:0px;top:0px; }
    	.ctl00_menu1_1 { color:#284E98;font-family:Verdana;font-size:12px;text-decoration:none; }
    	.ctl00_menu1_2 { color:#284E98;background-color:#75C5F0;font-family:Verdana;font-size:12px; }
    	.ctl00_menu1_3 {  }
    	.ctl00_menu1_4 { padding:2px 5px 2px 5px; }
    	.ctl00_menu1_5 {  }
    	.ctl00_menu1_6 { background-color:#75C5F0;padding:2px 5px 2px 5px; }
    	.ctl00_menu1_7 { background-color:#B5C7DE; }
    	.ctl00_menu1_8 {  }
    	.ctl00_menu1_9 { background-color:#507CD1; }
    	.ctl00_menu1_10 {  }
    	.ctl00_menu1_11 { background-color:#507CD1; }
    	.ctl00_menu1_12 { color:White; }
    	.ctl00_menu1_13 { color:White;background-color:#284E98;border-color:White;border-width:1px;border-style:Solid; }
    	.ctl00_menu1_14 { color:White;font-family:Verdana;font-size:Small; }
    	.ctl00_menu1_15 { color:White;background-color:#284E98;border-color:White;border-width:1px;border-style:Solid;font-family:Verdana;font-size:Small; }
    
    </style></head>
    Code (markup):
    Now this is the cleaned up version I did. All the same information is basically there, just referenced external files and organized some stuff.
    
    <!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>
        <title>Acquática Guarulhos</title>
        <meta name="keywords" content="Personal Training Cardio Workout" />
        <link rel="stylesheet" href="css/layout.css" type="text/css" />
        <link rel="stylesheet" href="css/style.css" type="text/css" />
        <script src="script/redirect.js" type="text/javascript"
        language="javascript"></script>
    </head>
    
    <body id="index">
         <div id="wrapper">
             Content
         </div>
    </body>
    </html>
    
    Code (markup):
    Basically I just simplified it and cleaned it up. Organization is really key in web design, so the first thing I did was organize where your files are. I pulled out the embedded style sheet, and gave it its own file... in its own folder for css files. I also threw the layout.css file in there, because all files should be grouped like that. I also took out the redirect script, since you seemed to use it on all pages, and gave it its own file and folder. I took out the head id since that was unnecessary. I put everything on its own line and made sure to indent to keep things simple. I also included some meta information, because if you are doing a site like that you are going to want google and other search engines to get as much information about you as possible.

    Just remember if you take out any of the scripts and you put them in their own file, to not include the <script> tags, just make sure to rename the file so it ends in .js or whatever type you are using, and the browser will automatically detect it with the information given in the <head>.
     
    matthewbeckman, Feb 29, 2008 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #4
    OW - that code looks painful... an ID on the HEAD tag, that makes sense (NOT), a ton of scripts on a site that doesn't even look like it NEEDS scripts for ANYTHING... more presentational markup than you can shake a stick at...

    CIASO. Chuck It And Start Over - it's beyond saving. As MatthewB said, I smell a website creation tool... If I came upon this code in a library, it would be like the scene in Ghostbusters:

    Symmetrical book stacking. Just like the Philadelphia mass turbulence of 1947...
    You're right, no human being would stack books like this.
     
    deathshadow, Feb 29, 2008 IP
  5. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I'll third this as well. You have a two column layout - there's no need for all that code.
     
    Dan Schulz, Mar 1, 2008 IP
  6. zooDel

    zooDel Greenhorn

    Messages:
    39
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #6
    woh, if only ff was the problem :p (of course it wouldn't be).

    Maybe you should look for a template, try googleing 'free css template'. Give yourself something to work off.
     
    zooDel, Mar 2, 2008 IP
  7. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #7
    FF was the only one showing the problem : )

    I've had it where I've got a mistake I didn't catch, and everyone is showing the page the way I want, and then someone like Safari will pitch a fit and I'll be like, what's wrong with this browser? And usually it's the code instead : )
     
    Stomme poes, Mar 2, 2008 IP
  8. rodneygru

    rodneygru Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Folks,

    My original code is very close of matthewbeckman cleaned up version. So, try to understand that its a Asp .net 2 page, and, I wrote that with Visual Studio 2008. I appreciate if you can help me.

    Thanks.
     
    rodneygru, Mar 20, 2008 IP