CODEWITHSUNDEEP
htmlcssinternet-explorerfirefoxgoogle-chrome
MOTIVECODEX
MOTIVECODEX

Reputation: 2752

Working in Chrome, but not working in I.E. and Firefox. CSS/STYLE/HTML/PHP

I can't figure out how to fix this annoying problem. Searched and tested a lot but nothing works.

Well, I want everything to look like the first image Google Chrome. In I.E. the background is different, the header is not in the center. In Firefox the boxes are not set correctly. I want 2 boxes in every row.

I don't know why this is happening.

I don't get why I.E. is still on the web for download.. Terrible browser

Can someone help me out?

Chrome:

enter image description here

Firefox:

enter image description here

I.E.

enter image description here

Here you can see index.php

HTML/PHP

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" href="./favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
<link href="includes/style.css" rel="stylesheet" type="text/css" />
<title>-</title>

<style type="text/css">
/*<![CDATA[*/
#title{color:red; padding-bottom: 240px; padding-left: 25px;}
#desc{color:blue; padding-bottom: 135px; padding-left: 5px;}
/*]]>*/
</style>

<style type="text/css">
/*<![CDATA[*/
 div.c1 {width: 953px}
/*]]>*/
</style>
</head>

<body>
    <div class="header navpos c1" id="nav">
            <table summary="header" border="0">
                <tr>
                    <td>
                        <ul>
                            <li class="home"><a href="index.html"></a></li>
                        </ul>
                    </td>
                    <td>
                        <ul>
                            <li class="about"><a href="manage.html"></a></li>
                        </ul>
                    </td>
                    <td>
                        <ul>
                            <li class="contact"><a href="contact.html"></a></li>
                        </ul>
                    </td>
                    <td>
                        <ul>
                            <li class="twitter"><a href="index.html"><img src="includes/images/f_logo.png" alt="** PLEASE DESCRIBE THIS IMAGE **" /></a></li>
                        </ul>
                    </td>
                    <td>
                        <ul>
                            <li class="facebook"><a href="index.html"><img src="includes/images/t_logo.png" alt="link to Syndicate Plus Twitter" /></a></li>
                        </ul>
                    </td>
                </tr>
            </table>
    </div>
    <div class="box c1">
        <?php while($products = mysql_fetch_array($result)) {?>
        <table style="float: left;" width="473" align="left" background="includes/images/box.gif" width="473" height="285">
            <tr>
                <td width="35%" height="100%" id="title"><?php echo $products['products'];?></td>
                <td width="70%" height="100%" id="desc"><?php echo $products['description'];?></td>
            </tr>
        </table>
    <?php
    }       
    ?>
    </div>
    <div class="footer"></div>
</body>
</html>

Here you can see style.css CSS***

* {
margin : 0;
padding : 0;
}
html {
background-image : url(images/web_bg.png);
}
body {
width : 953px;
margin : auto;
}
img {
border : 0;
}
A:link {
text-decoration : none;
color : #0087dc;
}
A:visited {
text-decoration : none;
color : #0087dc;
}
A:hover {
text-decoration : none;
color : #0087dc;
}
a:active, a:focus {
outline : 0;
}
a {
outline : none;
}
.header {
background-image : url(images/header_bg.png);
width : 953px;
margin : auto;
}
.footer {
background-image : url(images/bot_new.png);
min-height : 229px;
max-height : 229px;
position: relative;
}
#nav {
float : left;
}
#nav li {
float : left;
list-style-type : none;
}
#nav .home a {
margin-left : -20px;
margin-top : 25px;
display : block;
background-image : url(images/header_home.png);
background-repeat : no-repeat;
width : 400px;
height : 54px;
}
#nav .about a {
margin-left : 300px;
margin-top : 30px;
display : block;
background-image : url(images/header_about.png);
background-repeat : no-repeat;
width : 64px;
height : 13px;
}
#nav .contact a {
margin-left : 20px;
margin-top : 30px;
display : block;
background-image : url(images/header_contact.png);
background-repeat : no-repeat;
width : 64px;
height : 13px;
}
#nav .twitter a {
margin-left : 40px;
margin-top : 30px;
display : block;
background-image : url(images/t_logo.png);
background-repeat : no-repeat;
width : 26px;
height : 26px;
}
#nav .facebook a {
margin-left : 5px;
margin-top : 30px;
display : block;
background-image : url(images/f_logo.png);
background-repeat : no-repeat;
width : 26px;
height : 26px;
}
#nav .home a:hover {
margin-left : -20px;
margin-top : 25px;
background : url(images/header_home_light.png);
background-repeat : no-repeat;
width : 400px;
height : 54px;
}
#nav .about a:hover {
margin-left : 300px;
margin-top : 30px;
background : url(images/header_about_light.png);
background-repeat : no-repeat;
width : 64px;
height : 13px;
}
#nav .contact a:hover {
margin-left : 20px;
margin-top : 30px;
background : url(images/header_contact_light.png);
background-repeat : no-repeat;
width : 64px;
height : 13px;
}

Upvotes: 3

Views: 12112

Answers (3)

Netizen110
Netizen110

Reputation: 1654

Try display: inline-block;

Not sure as not tested.

Upvotes: 0

yosh
yosh

Reputation: 3305

Wrap the header, content and footer in a <div> of constant width to force the next line at some point.

<body>
<div id="wrapper">
  <div id="header">header</div>
  <div id="content">
      <script type="text/javascript">
        for (i=0;i<5;i++) { // example in javascript
          document.write("<div style='float:left;width:80px;height:80px;background-color:blue;margin:2px;'></div>");
        }
      </script>
  </div>     
  <div id="footer">footer</div>    
</div>
</body>

CSS:

body {
   text-align:center;
}
#wrapper {
    background-color:#eee;
    width:300px;
    margin: 0 auto;
    text-align:left;
}
#header {
    background-color:red;
}
#content {
}
#footer {
    clear:both;
    background-color:green;
}

Working code & result: http://jsfiddle.net/fsHd5/3/

Upvotes: 1

Toast
Toast

Reputation: 424

For your IE problem, you're telling #nav to float left. There is no real need for that. I assume you were intending to apply it to the child elements. IE does have an issue with backgrounds only expanding to the height of the content. Other than the kinda-hacky solution of setting a height explicitly, I have no fix for that.

In firefox it's not enforcing the width of the body, so use a div around it to force the width to what you want.

Upvotes: 1

Related Questions