Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts

    Firefox VS IE problem

    Take a look at the website I am coding here.

    http://www.rodgame.org/downloads/bruce2/index.html

    At the top Welcome, About, Listings, etc. It looks perfect in firefox browsers. However it is all screwed up in IE. I don't understand, I tested by taking out lots of letters to see if it would pop back in place but it didn't work.

    Code:
    <div id="menu">
    		<ul>
    			<li><a href="index.html">Welcome</a></li>
    			<li><a href="about.html">About Us</a></li>
    			<li><a href="conf.html">Conf. Form</a></li>
    			<li><a href="#">Buy</a></li>
    			<li><a href="#">Sell</a></li>
    			<li><a href="#">Listings</a></li>
    			<li><a href="#">Buyer</a></li>
    			<li><a href="contact.html">Contact</a></li>
    		</ul>
    	</div>
    Code:
    #menu {
    	float: left;
    	clear: left;
    	height: 50px;
    	background: url(images/img02.gif) no-repeat;
    }
    
    #menu ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    
    #menu li {
    	display: inline;
    }
    
    #menu a {
    	float: left;
    	display: block;
    	margin: 14px 10px 0 10px;
    	padding: 0 10px;
    	background: #40C1D4;
    	text-decoration: none;
    	letter-spacing: -1px;
    	font-size: 1.4em;
    	color: #FFFFFF;
    }
    
    #menu a:hover {
    	background: #0083A9;
    }

  • #2
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Right, well I'm seeing it "screwed up" in both FF and IE, but this all depends on which physical screen I'm using. A larger monitor displays as intended, but a standard sized one compresses the menu bar.

    Try reducing the font size a little, in your menu bar.

    Make sure you have a global reset inserted at the top of your stylesheet.
    Code:
    * {margin:0; padding:0;}
    IE does silly things with margin and padding, just to piss us off.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #3
    New Coder
    Join Date
    Feb 2008
    Posts
    55
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Smile

    why you not put the order syntax for not screw up?

    Code:
    <!--[if lte IE 7]><link href="your css files" rel="stylesheet" type="text/css" /><![endif]-->
    <!--[if IE 7]><link href="your css files" rel="stylesheet" type="text/css" /><![endif]-->
    <!--[if IE 6]><link href="your css files" rel="stylesheet" type="text/css" /><![endif]-->
    <!--[if lt IE 7]>
    Last edited by destruction; 11-06-2008 at 06:11 AM.

  • #4
    Regular Coder
    Join Date
    Nov 2007
    Location
    127.0.0.1
    Posts
    348
    Thanks
    26
    Thanked 40 Times in 39 Posts
    Adding width attribute to the menu resolves the issue.

    Code:
    #menu {/*style.css (line 94)*/
    background:transparent url(images/img02.gif) no-repeat scroll 0 0;
    clear:left;
    float:left;
    height:50px;
    width:800px;
    }
    Blog Charity:Water
    WhatisWrongWith.me/tagnu - Send me anonymous feedback.

  • #5
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts
    Quote Originally Posted by destruction View Post
    why you not put the order syntax for not screw up?

    Code:
    <!--[if lte IE 7]><link href="your css files" rel="stylesheet" type="text/css" /><![endif]-->
    <!--[if IE 7]><link href="your css files" rel="stylesheet" type="text/css" /><![endif]-->
    <!--[if IE 6]><link href="your css files" rel="stylesheet" type="text/css" /><![endif]-->
    <!--[if lt IE 7]>
    Because I can code CSS decently, but I haven't learn that part.

    Hmm so try margin/padding, and a set width. I shall be back!

  • #6
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts
    *bump* I tried everything and I can't get a happy medium. If I use this

    Code:
    #menu {
    	float: left;
    	clear: left;
    	height: 50px;
    	width: 750px;
    	background: url(images/img02.gif) no-repeat;
    }
    It works fine in firefox but wrong in IE, and if I use this

    Code:
    #menu {
    	float: left;
    	clear: left;
    	height: 50px;
    	width: 850px;
    	background: url(images/img02.gif) no-repeat;
    }
    it works in IE but is totally screwed up in Firefox. I tried things like 780, 790, 800, 805, 810, etc. It won't set right for any of it.

  • #7
    Regular Coder
    Join Date
    Nov 2007
    Location
    127.0.0.1
    Posts
    348
    Thanks
    26
    Thanked 40 Times in 39 Posts
    I've changed the width of #menu to 800px and uploaded here.

    The menu look fine in both IE and FF. Where exactly is the issue? The search part?
    Blog Charity:Water
    WhatisWrongWith.me/tagnu - Send me anonymous feedback.

  • #8
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts
    It is still bugged in Firefox. Here is a screen shot of it. My screen res is 1024 X 768


  • #9
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Quote Originally Posted by masterofollies View Post
    My screen res is 1024 X 768
    As a rule, I usually build for an 800x600 screen, so that users on a larger screen only have to deal with a little more whitespace (which nobody minds), whilst the smaller screens are accommodating my layout, well within their constraints.

    In my opinion, I feel the layout is too wide and is therefore wrapping, somehow. I'm not sure if this is a cross-browser issue, but a flaw in the design. No offence, because of course, I'd have to look deeper into the problem, before asserting this.
    Last edited by Doctor_Varney; 11-10-2008 at 10:04 PM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #10
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Ahh... Hang on... Could you try putting a minimum width on the header; perhaps even the page, to stop the content maxing out in the #divs, as the page is narrowed. As I'm seeing it, the page will hang together alright in FF, but only if I pull my screen to a width to accommodate. It's a similar story in IE7, although here, the elements are 'dropping out' at a different width-threshold.

    The code I suggest you could try, would be:
    (highlighted in yellow)

    Code:
    #header {
    BACKGROUND: url(images/img01.gif) repeat-x left bottom; HEIGHT: 100px; MIN-WIDTH:590px;
    }
    Or you could try it like this; applied to the whole page:

    Code:
    BODY {
    
    	MIN-WIDTH:590px; FONT-SIZE: 13px; BACKGROUND: #ffffff; MARGIN: 20px; COLOR: #666666; FONT-FAMILY: Georgia, "Times New Roman", Times, serif;
    
    }
    Hope this helps...
    Let us know how you get on...?

    Doctor V
    Last edited by Doctor_Varney; 11-10-2008 at 10:05 PM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #11
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Quote Originally Posted by Doctor_Varney View Post
    Also... More importantly, it appears you have neglected to fit operators to the ends of some of your rules...

    For instance, this:
    Code:
    OL {
    
        MARGIN-LEFT: 3em
    
    }
    ...is not acceptable. You must end a style rule with ;
    Incorrect syntax will inevitably lead to problems.

    Use the w3C validator to weed out any problems in your code.
    Alas, it is. The last semi-colon of any series of properties (the last one before a closing bracket) is implied, so this is perfectly acceptable.

  • #12
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    That's right, Cyan. I just looked up the syntax on the W3C site to make absolutely sure. You don't have to put a ; after the last command, but it is necessary between them. Damn you, for getting here, before I managed to edit my own steaming baloney.

    (One learns something new, every day... Providing one does CSS, every day...)
    Last edited by Doctor_Varney; 11-10-2008 at 08:23 PM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #13
    Regular Coder
    Join Date
    Nov 2007
    Location
    127.0.0.1
    Posts
    348
    Thanks
    26
    Thanked 40 Times in 39 Posts
    Quote Originally Posted by masterofollies View Post
    It is still bugged in Firefox. Here is a screen shot of it. My screen res is 1024 X 768
    I should have checked the resolution.

    Here you go: Updated Link
    2 Changes.

    1. Reduce the margin-left/right from 10px to 5px
    Code:
    #menu a {/*style.css (line 80)*/
    background:#40C1D4 none repeat scroll 0 0;
    color:#FFFFFF;
    display:block;
    float:left;
    font-size:1.4em;
    letter-spacing:-1px;
    margin:14px 5px 0;
    padding:0 10px;
    text-decoration:none;
    }
    2. Change the width attribute, so that it won't overlap with #search.
    Edit: This works fine (verified only in FF) even if you remove the width attribute completely.
    Code:
    #menu {/*style.css (line 70)*/
    background:transparent url(images/img02.gif) no-repeat scroll 0 0;
    clear:left;
    float:left;
    height:50px;
    width:758px;
    }
    Ps: This layout will break in 800x600 resolution. As a quick workaround, you can position #search as absolute instead of 'float:right'. Something like:
    Code:
    #search {/*style.css (line 86)*/
    background:transparent url(images/img03.gif) repeat scroll 0 0;
    /*float:right;*/
    height:100px;
    position:absolute;
    right:0;
    width:200px;
    }
    Last edited by tagnu; 11-11-2008 at 06:36 AM. Reason: Added workaround for 800x600 resolution.
    Blog Charity:Water
    WhatisWrongWith.me/tagnu - Send me anonymous feedback.

  • Users who have thanked tagnu for this post:

    masterofollies (11-11-2008)

  • #14
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts
    Rock on tagnu you got it! Thanks

  • #15
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Quote Originally Posted by masterofollies View Post
    Rock on tagnu you got it! Thanks
    Not sure he has. The links are still dropping out. Might be worth applying the min-width attribute to the body, as I suggested.

    In my opinion, I think the #header should perhaps be given a width attribute as well. One which is wider than the #menu, to accommodate it.
    Last edited by Doctor_Varney; 11-12-2008 at 12:22 AM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •