Firefox Vs IE7 (CSS)

This is a discussion on "Firefox Vs IE7 (CSS)" within the Web Page Design section. This forum, and the thread "Firefox Vs IE7 (CSS) are both part of the Design Your Website category.



Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design
Reload this Page Firefox Vs IE7 (CSS)

Notices
Please Register!
Webforumz.com is an education based community supporting web designers, developers and those who are new and learning. If you are a designer, developer, learning web design or are thinking about a career in web design then you have come to the right place. Register for free now to access more information and to participate in discussion and debate.


Reply
 
LinkBack Thread Tools
  #1 (permalink)  
Old Sep 18th, 2007, 09:52
Most Reputable Member
Join Date: Feb 2004
Location: Borneo
Age: 27
Posts: 1,608
Blog Entries: 2
Thanks: 0
Thanked 4 Times in 3 Posts
Firefox Vs IE7 (CSS)
Well, what is the problem with this IE7? It makes me sick!

The code below is still under testing, which I spent a lot of time doing the testing in my firefox browser. When I tested them in IE7, the page seems totally lost! Could any of you have a look at them and teach me where to make the correction. I hope karinne will save me
Thank you.

IE7 Preview

Firefox Preview

Here is my Login.asp page:
Code: Select all
<%
    Content = ""                            'Clear the Content string
    QStr = Request.QueryString("login")        'Save the login querystring to QStr

    Title = "MonieWeb Login"

    'The code below saves the contents the table must have in the variable Content
    'The content depends on what's in the QueryString
        
    if QStr="passfailed" then                
        Content = Content & "<tr><td valign=top bordercolor=#F5F5F5 align=center><br></td></tr>"
        Content = Content & "<tr><td valign=top bordercolor=#F5F5F5 align=center><P><b><font face=Verdana color=#164376 size=2>Wrong Password nhehehe</P>Make sure that you have entered the valid <b>PASSWORD</b><BR><BR><A HREF=javascript:history.go(-1)><font face=Verdana color=#164376 size=2><b>:: Back ::</b></font></A></td></tr>"
        Content = Content & "<tr><td valign=top bordercolor=#F5F5F5 align=center><br></td></tr>"
    elseif QStr="namefailed" then
        Content = Content & "<tr><td valign=top bordercolor=#F5F5F5 align=center><br><br></td></tr>"
        Content = Content & "<tr><td valign=top bordercolor=#F5F5F5 align=center><P><b><font face=Verdana color=#164376 size=2>Invalid Username</P>Make sure that you have entered the valid <b>USERNAME</b></font><BR><BR><A HREF=javascript:history.go(-1)><font face=Verdana color=#164376 size=2><b>:: Back ::</b></font></A></b></td></tr>"
        Content = Content & "<tr><td valign=top bordercolor=#F5F5F5 align=center><br></td></tr>"
    elseif QStr="bothfailed" then        
        Content = Content & "<tr><td valign=top bordercolor=#F5F5F5 align=center><br><br></td></tr>"
        Content = Content & "<tr><td valign=top bordercolor=#F5F5F5 align=center><P><b><font face=Verdana color=#164376 size=2>You must supply both a username and password!</P>Make sure that you have entered the valid Username and Password</font><BR><BR><A HREF=javascript:history.go(-1)><font face=Verdana color=#164376 size=2><b>:: Back ::</b></font></A></b></td></tr>"
        Content = Content & "<tr><td valign=top bordercolor=#F5F5F5 align=center><br></td></tr>"
    elseif QStr="createnew" then
        Content = Content & "<form name=frmCreate method=POST action=create.asp>"
        Content = Content & "<tr><td valign=top bordercolor=#F5F5F5 align=center><br>Username: <input type=text name=txtUsername></td></tr>"
        Content = Content & "<tr><td valign=top bordercolor=#F5F5F5 align=center>Password: <input type=password name=txtPassword></td></tr>"
        Content = Content & "<tr><td valign=top bordercolor=#F5F5F5 align=center><br>Full name: <input type=text name=txtFullname></td></tr>"
        Content = Content & "<tr><td valign=top bordercolor=#F5F5F5 align=center><input type=submit name=cmdSubmit value=Register></td></tr>"
        Content = Content & "</form>"
    elseif QStr="createnamefailed" then
        Content = Content & "<tr><td valign=top bordercolor=#F5F5F5 align=center><P>Username already exist</P><A HREF=javascript:history.go(-1)>Back</A><BR><BR><A HREF=login.asp>Cancel registration</A></td></tr>"
    elseif QStr="createfullnamefailed" then
        Content = Content & "<tr><td valign=top bordercolor=#F5F5F5 align=center><P>Full name already exist/P><A HREF=javascript:history.go(-1)>Back</A><BR><BR><A HREF=login.asp>Cancel registration</A></td></tr>"
    else
        Content = Content & "<form name=frmMain method=POST action=verify.asp>"

            
        'Username and Password Input text box
    
        Content = Content & "<td cellpadding=0 cellspacing=0 bordercolor=#F5F5F5 align=left><font face=Verdana color=#164376 size=1>User Name :</font></td></tr>"
        Content = Content & "<td cellpadding=0 cellspacing=0 bordercolor=#F5F5F5 align=left><input type=text name=txtUsername size=50></td></tr>"
        Content = Content & "<td cellpadding=0 cellspacing=0 bordercolor=#F5F5F5 align=left><font face=Verdana color=#164376 size=1>Password</font></td></tr>"
        Content = Content & "<td cellpadding=0 cellspacing=0 bordercolor=#F5F5F5 align=left><input type=password name=txtPassword size=50></td></tr>"
        Content = Content & "<td cellpadding=0 cellspacing=0 bordercolor=#F5F5F5 align=right><font face=Verdana color=#164376 size=1>Forgot Your Password?</font></td></tr>"
        Content = Content & "<td cellpadding=0 cellspacing=0 bordercolor=#F5F5F5 align=right></tr>"
        
        Content = Content & "<tr><td valign=top bordercolor=#F5F5F5 align=right><input type=submit name=cmdSubmit value=Login><input type=reset name=cmdReset value=Reset_Field></font></td></tr>"
        Content = Content & "<tr><td valign=top bordercolor=#F5F5F5 align=center></td></tr>"
        Content = Content & "</form>"
    end if
%>

 <!-- Build the page with the table -->

<head>
<title>ADMINISTRATOR LOGIN</title>
<link rel="stylesheet" type="text/css" title="default" href="css/login.css" />
</head>

<Body onLoad="this.document.frmMain.txtUsername.focus();">
    <div id="mainframe">
        <div id="header"></div>
            <div id="navigation"></div>
            <div id="title"></div>
            <div id="content">
                <fieldset id="fieldset">
                <legend><% Response.Write(Title) %></legend>
                <div id="position">
                    <table border="0" cellspacing="0" bgcolor="#F5F5F5" bordercolor="#0D5692" width="320px" bordercolorlight="#000000" bordercolordark="#000000">
                         <%
                            Response.Write(Content)    'Paste the contents in the table
                            Session("name")= "frmMain.txtUsername"
                        %>
                    </table>
                </div>
                </fieldset>
            <h1>You have to Register before you can access this page!</h1>
            </div>
            <div id="navigation"></div>
            <div id="footer"></div>
    </div>
</body>
Here is my CSS:
Code: Select all
body {
    background-color: #E1E1E1;
    margin: 0; 
    padding: 0;
}
h2{
    margin: auto;
    height: 1.5em;
    font: small Verdana;
    font-size: 15px;
    text-align: center;
}
#mainframe {
    background-color: white; 
    margin: auto; 
    width: 886px; 
    height: auto;
}
#header {
    background-color: #3a5485;
    margin: auto;
    width: 886px; 
    height: 35px;
}
#navigation {
    background-color: #fff;
    margin: auto;
    width: 886px; 
    height: 95px;
}
#content {
    width: 550px; 
    height: auto;
    margin: auto;
    padding: 1em 0 0 0;
    border: 1px solid black;
}
#title {
    width: 550px; 
    height: 15px;
    margin: auto;
    background-color: #3A5485;
    border: 1px solid black;
    padding: 1em 0 0 0;
}
#position {
    margin: auto;
    width: 334px;
    height: 136px;
}
#footer {
    background-color: #3a5485;
    margin: auto;
    width: 886px; 
    height: 35px;
}
#fieldset {
    margin: auto;
    padding-bottom: 0;
    padding-top: 2em;
    width: 500px;
    font: small verdana;
    font-size: 10px;
    color: #000;
}
Last Blog Entry: ASP Programming Tips and Technique (Oct 26th, 2007)
Last edited by Monie; Sep 18th, 2007 at 10:06. Reason: respell karinne name
Reply With Quote

  #2 (permalink)  
Old Sep 18th, 2007, 12:16
moojoo's Avatar
Moderator
Join Date: Aug 2005
Location: Texas
Posts: 2,020
Blog Entries: 1
Thanks: 0
Thanked 33 Times in 33 Posts
Re: Firefox Vs IE7 (CSS)
Oi, VBScript. Any reason you have margin:0 auto; on everything? I have to catch a plane but will come back to this when I can.
__________________
I hate IE 6. Just sayin....
Last Blog Entry: Apps every Mac based web dev should consider (Jul 10th, 2008)
Last edited by moojoo; Sep 18th, 2007 at 12:20.
Reply With Quote
  #3 (permalink)  
Old Sep 18th, 2007, 15:41
Marc's Avatar
Moderator

SuperMember
Join Date: Apr 2007
Location: Scotland, UK
Age: 15
Posts: 1,662
Thanks: 0
Thanked 9 Times in 9 Posts
Re: Firefox Vs IE7 (CSS)
Following on from what moojoo said..

If you put *{margin:auto;} at the top of the CSS you dont need to repeat that again although if you do want to change the margin on anything just do it as so:
Code: Select all
.header{margin:20px;}
Above will set EVERY margin to zero unless you change it particularly like the way i did my example.

Sorry if that makes no sense...

I think of * as global/wildcard.
Reply With Quote
  #4 (permalink)  
Old Sep 18th, 2007, 16:04
karinne's Avatar
SuperMember

SuperMember
Join Date: Jan 2007
Location: You know where
Age: 31
Posts: 4,617
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Firefox Vs IE7 (CSS)
Quote:
Originally Posted by Marc View Post
I think of * as global/wildcard.
Pretty close

* is the universal selector

Quote:
The universal selector, written "*", matches the name of any element type. It matches any single element in the document tree.
If the universal selector is not the only component of a simple selector, the "*" may be omitted. For example:
  • *[lang=fr] and [lang=fr] are equivalent.
  • *.warning and .warning are equivalent.
  • *#myid and #myid are equivalent.
Reply With Quote
  #5 (permalink)  
Old Sep 19th, 2007, 02:30
Most Reputable Member
Join Date: Feb 2004
Location: Borneo
Age: 27
Posts: 1,608
Blog Entries: 2
Thanks: 0
Thanked 4 Times in 3 Posts
Re: Firefox Vs IE7 (CSS)
Quote:
Originally Posted by Marc View Post
Following on from what moojoo said..

If you put *{margin:auto;} at the top of the CSS you dont need to repeat that again although if you do want to change the margin on anything just do it as so:
Code: Select all
.header{margin:20px;}
Above will set EVERY margin to zero unless you change it particularly like the way i did my example.

Sorry if that makes no sense...

I think of * as global/wildcard.
Well, If I dont set the {margin: auto;} to the div inside the div (eg. Div A is inside div B), them the div position will be default to the left. If I set it to auto, it will be at the top center. Thats why I put the {margin: auto;} to every element that I want them to be at the top center. Any other way?

When I use the CSS in my other navigation page (different css file from the login page), it seems to be OK in Firefox and IE7. The only problem occur in my login page. Is this something to do with the asp function:

Code: Select all
<%
    Content = ""                            'Clear the Content string
    QStr = Request.QueryString("login")        'Save the login querystring to QStr

    Title = "MonieWeb Login"

    'The code below saves the contents the table must have in the variable Content
    'The content depends on what's in the QueryString
        
    if QStr="passfailed" then                
        Content = Content & "<tr><td valign=top bordercolor=#F5F5F5 align=center><br></td></tr>"
        Content = Content & "<tr><td valign=top bordercolor=#F5F5F5 align=center><P><b><font face=Verdana color=#164376 size=2>Wrong Password nhehehe</P>Make sure that you have entered the valid <b>PASSWORD</b><BR><BR><A HREF=javascript:history.go(-1)><font face=Verdana color=#164376 size=2><b>:: Back ::</b></font></A></td></tr>"
        Content = Content & "<tr><td valign=top bordercolor=#F5F5F5 align=center><br></td></tr>"
    elseif QStr="namefailed" then
        Content = Content & "<tr><td valign=top bordercolor=#F5F5F5 align=center><br><br></td></tr>"
        Content = Content & "<tr><td valign=top bordercolor=#F5F5F5 align=center><P><b><font face=Verdana color=#164376 size=2>Invalid Username</P>Make sure that you have entered the valid <b>USERNAME</b></font><BR><BR><A HREF=javascript:history.go(-1)><font face=Verdana color=#164376 size=2><b>:: Back ::</b></font></A></b></td></tr>"
        Content = Content & "<tr><td valign=top bordercolor=#F5F5F5 align=center><br></td></tr>"
    elseif QStr="bothfailed" then        
        Content = Content & "<tr><td valign=top bordercolor=#F5F5F5 align=center><br><br></td></tr>"
        Content = Content & "<tr><td valign=top bordercolor=#F5F5F5 align=center><P><b><font face=Verdana color=#164376 size=2>You must supply both a username and password!</P>Make sure that you have entered the valid Username and Password</font><BR><BR><A HREF=javascript:history.go(-1)><font face=Verdana color=#164376 size=2><b>:: Back ::</b></font></A></b></td></tr>"
        Content = Content & "<tr><td valign=top bordercolor=#F5F5F5 align=center><br></td></tr>"
    elseif QStr="createnew" then
        Content = Content & "<form name=frmCreate method=POST action=create.asp>"
        Content = Content & "<tr><td valign=top bordercolor=#F5F5F5 align=center><br>Username: <input type=text name=txtUsername></td></tr>"
        Content = Content & "<tr><td valign=top bordercolor=#F5F5F5 align=center>Password: <input type=password name=txtPassword></td></tr>"
        Content = Content & "<tr><td valign=top bordercolor=#F5F5F5 align=center><br>Full name: <input type=text name=txtFullname></td></tr>"
        Content = Content & "<tr><td valign=top bordercolor=#F5F5F5 align=center><input type=submit name=cmdSubmit value=Register></td></tr>"
        Content = Content & "</form>"
    elseif QStr="createnamefailed" then
        Content = Content & "<tr><td valign=top bordercolor=#F5F5F5 align=center><P>Username already exist</P><A HREF=javascript:history.go(-1)>Back</A><BR><BR><A HREF=login.asp>Cancel registration</A></td></tr>"
    elseif QStr="createfullnamefailed" then
        Content = Content & "<tr><td valign=top bordercolor=#F5F5F5 align=center><P>Full name already exist/P><A HREF=javascript:history.go(-1)>Back</A><BR><BR><A HREF=login.asp>Cancel registration</A></td></tr>"
    else
        Content = Content & "<form name=frmMain method=POST action=verify.asp>"

            
        'Username and Password Input text box
    
        Content = Content & "<td cellpadding=0 cellspacing=0 bordercolor=#F5F5F5 align=left><font face=Verdana color=#164376 size=1>User Name :</font></td></tr>"
        Content = Content & "<td cellpadding=0 cellspacing=0 bordercolor=#F5F5F5 align=left><input type=text name=txtUsername size=50></td></tr>"
        Content = Content & "<td cellpadding=0 cellspacing=0 bordercolor=#F5F5F5 align=left><font face=Verdana color=#164376 size=1>Password</font></td></tr>"
        Content = Content & "<td cellpadding=0 cellspacing=0 bordercolor=#F5F5F5 align=left><input type=password name=txtPassword size=50></td></tr>"
        Content = Content & "<td cellpadding=0 cellspacing=0 bordercolor=#F5F5F5 align=right><font face=Verdana color=#164376 size=1>Forgot Your Password?</font></td></tr>"
        Content = Content & "<td cellpadding=0 cellspacing=0 bordercolor=#F5F5F5 align=right></tr>"
        
        Content = Content & "<tr><td valign=top bordercolor=#F5F5F5 align=right><input type=submit name=cmdSubmit value=Login><input type=reset name=cmdReset value=Reset_Field></font></td></tr>"
        Content = Content & "<tr><td valign=top bordercolor=#F5F5F5 align=center></td></tr>"
        Content = Content & "</form>"
    end if
%>

<!-- Build the page with the table -->

<head>
<title>ADMINISTRATOR LOGIN</title>
<link rel="stylesheet" type="text/css" title="default" href="css/login.css" />
</head>

<Body onLoad="this.document.frmMain.txtUsername.focus();">
    <div id="mainframe">
        <div id="header"></div>
            <div id="navigation"></div>
            <div id="title"></div>
            <div id="content">
                <fieldset id="fieldset">
                <legend><% Response.Write(Title) %></legend>
                <div id="position">
                    <table border="0" cellspacing="0" bgcolor="#F5F5F5" bordercolor="#0D5692" width="320px" bordercolorlight="#000000" bordercolordark="#000000">
                      <%
                            Response.Write(Content)    'Paste the contents in the table
                            Session("name")= "frmMain.txtUsername"
                        %>
                    </table>
                </div>
                </fieldset>
            <h1>You have to Register before you can access this page!</h1>
            </div>
            <div id="navigation"></div>
            <div id="footer"></div>
    </div>
</body>
Last Blog Entry: ASP Programming Tips and Technique (Oct 26th, 2007)
Reply With Quote
  #6 (permalink)  
Old Sep 19th, 2007, 08:01
Reputable Member
Join Date: Apr 2007
Location: Scotland
Age: 17
Posts: 233
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Firefox Vs IE7 (CSS)
Correct me if i'm wrong but do you not just need to add this to your body style.

Code: Select all
body{
    text-align: center;
    background-color: #E1E1E1;
    margin: 0; 
    padding: 0;
}
Then left align it for the rest of your site

Code: Select all
#mainframe {
    text-align: left;
    background-color: white; 
    margin: auto; 
    width: 886px; 
    height: auto;
Using text-align: center; allows the margin: 0 auto; trick to work in IE. Try it out anyway.

Hope this helps.
Reply With Quote
  #7 (permalink)  
Old Sep 19th, 2007, 08:17
Most Reputable Member
Join Date: Feb 2004
Location: Borneo
Age: 27
Posts: 1,608
Blog Entries: 2
Thanks: 0
Thanked 4 Times in 3 Posts
Re: Firefox Vs IE7 (CSS)
Oh... what a release....
Thank you Blake121. I'll rate your profile to 5 star!

Thank you very much. The stupid ie browser understand your language, for some reason
Last Blog Entry: ASP Programming Tips and Technique (Oct 26th, 2007)
Last edited by Monie; Sep 19th, 2007 at 08:27.
Reply With Quote
  #8 (permalink)  
Old Sep 19th, 2007, 12:59
karinne's Avatar
SuperMember

SuperMember
Join Date: Jan 2007
Location: You know where
Age: 31
Posts: 4,617
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Firefox Vs IE7 (CSS)
It doesn't make sense tho .... margin: 0 auto; should work in IE7 ... adding the text-align: center; is only for IE5 and 5.5
Last edited by karinne; Sep 19th, 2007 at 16:27. Reason: wrong IE versions :p
Reply With Quote
  #9 (permalink)  
Old Sep 19th, 2007, 16:24
Reputable Member
Join Date: Apr 2007
Location: Scotland
Age: 17
Posts: 233
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Firefox Vs IE7 (CSS)
Good to see I speak IE7 lol.


I don't understand it either to be honest.

It's worked for me in the past though.

I think it's just IE being as stupid like normal.
Reply With Quote
  #10 (permalink)  
Old Sep 20th, 2007, 02:37
Most Reputable Member
Join Date: Feb 2004
Location: Borneo
Age: 27
Posts: 1,608
Blog Entries: 2
Thanks: 0
Thanked 4 Times in 3 Posts
Re: Firefox Vs IE7 (CSS)
Quote:
Originally Posted by karinne View Post
It doesn't make sense tho .... margin: 0 auto; should work in IE7 ... adding the text-align: center; is only for IE5 and 5.5
yeah, I did not make sense to me neither. As if I treating the DIV as a text now. Anyway, I found out another way to center the div using
Code: Select all
#centerDiv{
position: absolute
left: 20%
}
provided that your #container=80% wide.

Quote:
Originally Posted by Blake121 View Post
Good to see I speak IE7 lol.


I don't understand it either to be honest.

It's worked for me in the past though.

I think it's just IE being as stupid like normal.
I agree with you Blake121,
Last Blog Entry: ASP Programming Tips and Technique (Oct 26th, 2007)
Reply With Quote
Reply

« Floats don't effect the height of the their container????? | Centering my site »
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
CSS & Firefox Daniel Web Page Design 7 Apr 3rd, 2007 14:01
Useful Firefox Add-ons Antwan Webforumz Cafe 19 Feb 21st, 2007 16:02
alt tag in Firefox afuller Web Page Design 8 Dec 9th, 2006 19:16
Need help regarding firefox vs. ie james@thecultureofme Web Page Design 5 Jun 2nd, 2006 14:32
IE ok, Firefox no way lizarddoctor Web Page Design 4 Nov 27th, 2005 23:35


All times are GMT. The time now is 23:12.

Contact Us - Web Design & Development Forums - Archive - Top

Sleep Study Scoring :: Free Bet :: Online Betting :: Bookmakers :: Funny Quotes :: Internet Recruitment Software :: Microsoft CRM Experts :: Online Casino :: Decorated Christmas Trees :: Web Hosting :: Football Betting :: Web Development India :: Ecommerce Software :: Football Stats :: Dry Cleaning Collection :: Free Bets :: xtreme wales - extreme clothing :: Apuestas :: SEO Company India :: Werbeartikel :: Sharepoint Consultants :: Search Engine Optimisation :: Office Clearance London :: Sharepoint Experts :: Sports Betting :: Casino :: Website Templates :: Online Gambling

Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.2.0 RC8
© 2003-2008 Webforumz.com : All Rights Reserved

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43