Forums

GavinCZA

Hey everyone,

I have been following Chris's tutorial on Photoshop to CSS, and found that I get this issue between FF and IE7. Now I have tried doing this on 2 differnent machines, and at some point it all goes well... but then weirds out and I get this:

http://img24.imageshack.us/img24/5981/fromfffx1.th.png

The above image is in FF and below is how it looks in IE:
http://img10.imageshack.us/img10/6492/fromierk1.th.png

Sorry the header is not WOW as I am still designing, but you'll see what the issue is anyway.

and then here is a snippet of code *I'm working in Visual Studio* But can't see that it should be a problem.
HTML:

<%@ Page Language=\"vb\" AutoEventWireup=\"false\" CodeBehind=\"Login.aspx.vb\" Inherits=\"bmaintranet._Default\" %>

<!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 runat=\"server\">
    <title>Welcome Page</title>
    
    <link href=\"StyleSheet1.css\" rel=\"stylesheet\" type=\"text/css\" />
</head>
<body>
    <form id=\"form1\" runat=\"server\">
    
    
    <div id=\"page-wrap\">
    
        <ul id=\"nav\">
            <li></li>
        </ul>
        
        <div id=\"main-content\">
        
            <div id=\"right-col\">
            
            <h1>Welcome </h1>
            Content
            </div> <!-- END LEFT-COL -->
            
            <div id=\"left-col\" >
            <img src=\"images/border.jpg\" />
            <h2>login:</h2>
            Couple of buttons
            </div> <!-- END RIGHT-COL -->
            
            <div id=\"left-col2\">
            <img src=\"images/border.jpg\" />
            </div> <!-- END LEFT-COL2 -->
            
            <div class=\"clear\"></div>
        
        
        </div> <!-- MAIN-CONTENT -->
                        
    </div>  <!-- END PAGE-WRAP -->
    </form>
</body>
</html>

And the CSS:

/* CSS Document */
*
{
    margin: 0 0 13px 0;
    padding: 0;
    }

body
{
    font-size: 12px;
    font-family: Ariel, Helvetica, Verdana, Sans-Serif;
    color: #666666;
    background: url(images/body-bg.jpg) repeat-x top #ffffff;
	background-color: #3A362F;
    }

h1
{
    font-size: 3.0em; margin-bottom: 0.8em; text-transform: uppercase;
	padding-top: 5px;
    }
h2
{
    font-size: 2.0em; margin-bottom: 0.4em; text-transform: uppercase;
	padding-top: 5px;
    }            

.clear
{
    clear: both;
    }

div#page-wrap
{
    width: 800px;
    margin: 0 auto;    
    }
	
ul#nav
{
    height: 203px; 
    background: url(images/header-bg.jpg) no-repeat;
    list-style: none;
    margin: 0 auto;
    }
    ul#nav li a
    {
        display: block;
        width: 130px;
        float: left;
        margin-top: 120px;
        color: White;
        font-weight: bold;
        }
		
div#main-content
{
    padding-bottom: 50px;
	background-color: #3A362F;
    }
    div#main-content div#left-col
    {
        float: left;
        width: 232px;
		height: 250px;
        border: 1px solid #545454;
		background-color: #282520;
		
        }
		
	div#main-content div#left-col2
    {
        float: left;
        width: 232px;
		top: 200px;
		height: 250px;
		margin-top: 10px;
        border: 1px solid #545454;
		background-color: #282520;
		
        }
    div#main-content div#right-col
    {
        float: right;
        width: 540px;
        border: 2px solid #282520;
        line-height: 30px;
		background-color: #DEDEDE;
		padding-left: 5px;
        }

Everything else looks fine, it is just that the header is not alligning in FF, but is doing pretty ok in IE. Any Ideas?

Ramesh

can you upload the body background image or give the link of the site

ikthius

Gavin,

could you post a link to the test page, then I can get firebug over it to see whats wrong?

GavinCZA

Sorry for the late reply, been offline for some time.

I managed to sort the issue out, it seemed that my firefox was causingthe issue. I had to reload my notebook, and once I reinstalled all applications it sorted it out, I haven;t seen the issue again.

thank you all for trying to help.

treehouse : what would you like to learn today?

Forums

Mis-alligned