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.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Apr 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer Firefox and IE headache

    If you view the below page in IE it looks fine, when you view it in Firefox the spacing on the text at the bottom of the page and the positioning of the orange box is out.

    http://www.carousellogistics.co.uk/S...rehousing.html

    I'm thinking of resorting to using two separate CSS and using the following to fix the problem:

    <![if !IE]>
    <link href="/css/firefox_carousel.css" rel="stylesheet" type="text/css" />
    <![endif]>
    <!--[if IE]>
    <link href="/css/carousel.css" rel="stylesheet" type="text/css" />
    <![endif]-->

    Obviously I would like to avoid this method but I'm stuck to be honest!

    Any help would be great!

    Thanks,

    Phil

  • #2
    Regular Coder
    Join Date
    Jun 2007
    Location
    N. Ireland
    Posts
    351
    Thanks
    16
    Thanked 4 Times in 4 Posts
    I would suggest building it so it works in FF and then hack it to work in IE.

    Nice site btw.

    Edit: I usually write my css on separate lines so that it is easier to read and change if necessary.

    D.
    Daemonkin.
    If this was helpful, please add to my reputation
    Thousand Sons - Freelance Web Developer - ninetyonedegrees.com

  • #3
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by pj51182 View Post
    If you view the below page in IE it looks fine, when you view it in Firefox the spacing on the text at the bottom of the page and the positioning of the orange box is out.

    http://www.carousellogistics.co.uk/S...rehousing.html
    While developing it is a good idea to use background colors for your elements so you can actually see how big they are. Try the following and you'll clearly see that .strap has too small a height.
    Code:
    .strap {
    	position : absolute;
    	width : 360px;
    	height : 75px;
    	z-index : 3;
    	left : 260px;
    	top : 347px;
    	color: #FFFFFF;
    	font-size: 12.5px;
    	font-family: Tahoma, Verdana, Arial, sans-serif;
    	line-height: 0.5cm;
    	background: red;
    }
    Usually one shouldn't set a height on an element that contains text. Because you never really know the appropriate height to set. I recommend using auto height in such cases (which is the same as setting no height)
    Code:
    .strap {
    	position : absolute;
    	width : 360px;
    	height: auto;
    	z-index : 3;
    	left : 260px;
    	top : 347px;
    	color: #FFFFFF;
    	font-size: 12.5px;
    	font-family: Tahoma, Verdana, Arial, sans-serif;
    	line-height: 0.5cm;
    	background: red;
    }

  • #4
    New to the CF scene
    Join Date
    Apr 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question

    Thanks for the help so far! I have set the strap height as auto but this has not made any difference unfortunately.

    The orange boxes...for example:

    .menu_front_overview { position : absolute; width : 160px; height : 116px; z-index : 3; left : 170px; top : 109px; background-color: #feb801; color: #646464;}

    ...are also out, I think it has something to do with how IE and Firefox work differently in the way they are picking up the position of the DIV tags and how they are displaying the text. The text in IE is 4 lines and Firefox it spills over to a 5th line!

    any ideas?

  • #5
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by pj51182 View Post
    Thanks for the help so far! I have set the strap height as auto but this has not made any difference unfortunately.
    Can you update your code so we can see the change?

    Quote Originally Posted by pj51182 View Post
    The orange boxes...for example:

    .menu_front_overview { position : absolute; width : 160px; height : 116px; z-index : 3; left : 170px; top : 109px; background-color: #feb801; color: #646464;}

    ...are also out
    Same case. I would drop the height.
    Quote Originally Posted by pj51182 View Post
    The text in IE is 4 lines and Firefox it spills over to a 5th line!
    Yeah, you really have no way of telling in advance how may lines the text will occupy. If the user chooses to zoom the text using CTRL+/- then clearly the text will take up more/less space. Also you don't really know which fonts are available on the client machine. Have this uncertainty in mind when you design the page. Otherwise we are not talking about web design. Rather it would be print media design.

  • #6
    New to the CF scene
    Join Date
    Apr 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Can you update your code so we can see the change?
    I have updated the CSS... height : auto;

    Same case. I would drop the height.
    This won't work due to the way the page works. Each box is different and specified by the DIV.

    As for the text at the bottom...any ideas on how to make it fit properly?

    Thanks,

    Phil

  • #7
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by pj51182 View Post
    This won't work due to the way the page works. Each box is different and specified by the DIV.
    Hmm... when I look at your HTML I see no element with class .menu_front_overview so I don't know which element the style was supposed to apply to.

    Quote Originally Posted by pj51182 View Post
    As for the text at the bottom...any ideas on how to make it fit properly?
    Yes, we have many ideas, but please fix your CSS first. Use the CSS validator to find your errors. I say this because I see some nasty errors. For example there is no align property in CSS:
    Code:
    #pageholder {
    	display:inline;
    	width: 956px;
    	height: 500px;
    	float: left;
    	align: left;
    	position: absolute;
    	padding: 0;
    	margin: 0;
    	border: 0;
    }

  • #8
    New to the CF scene
    Join Date
    Apr 2007
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    Quote Originally Posted by koyama View Post
    Hmm... when I look at your HTML I see no element with class .menu_front_overview so I don't know which element the style was supposed to apply to.
    <div id="orangebox" class="menu_front_overview">
    <ul>
    <li>3rd Party Logistics</li>
    <li>Established 1984</li>
    <li>Independent</li>
    <li>Family Owned</li>
    <li>Over 100 Employees</li>
    <li>Extensive Service Range</li>
    </ul>
    </div>

    (taken from the overview page)

    .menu_front_overview {
    position : absolute;
    width : 160px;
    height : 116px;
    z-index : 3;
    left : 170px;
    top : 109px;
    background-color : #feb801;
    color : #646464;
    }

    (taken from CSS)

    Quote Originally Posted by koyama View Post
    Yes, we have many ideas, but please fix your CSS first. Use the CSS validator to find your errors. I say this because I see some nasty errors. For example there is no align property in CSS:
    Code:
    #pageholder {
    	display:inline;
    	width: 956px;
    	height: 500px;
    	float: left;
    	align: left;
    	position: absolute;
    	padding: 0;
    	margin: 0;
    	border: 0;
    }
    OK I fixed the CSS and it is now valid!

  • #9
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by pj51182 View Post
    OK I fixed the CSS and it is now valid!
    Ok, I looked at your CSS and I now see that the main problem is that you are using way too much absolute positioning. The technique has serious limitations which is why developers avoid using it for layout.

    I suggest that you switch to a floated layout. This may get you started:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<title>2 column fixed width</title>
    		<style type="text/css">
    			body {
    				margin: 0;
    			}
    			#wrap {
    				width: 900px;
    				margin-left: 40px;
    				background: red;
    			}
    			#header {
    				height: 75px;
    				background: green;
    			}
    			#inner-wrap {
    				width: 900px;
    				overflow: hidden;
    				min-height: 380px;
    				_height: 380px; /* emulate min-height in IE6 */
    				background: yellow;
    			}
    			#sidebar {
    				float: left;
    				width: 130px;
    				color: white;
    				background: black;
    			}
    			#main {
    				float: left;
    				width: 770px;
    				background: orange;
    			}
    			#footer {
    				background: pink;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="wrap">
    			<div id="header">Header</div>
    			<div id="inner-wrap">
    				<div id="sidebar">Sidebar</div>
    				<div id="main">
    					Main Contents<br>blahh...<br>blahh...
    				</div>
    			</div>
    			<div id="footer">Footer</div>
    		</div>
    	</body>
    </html>


  •  

    Posting Permissions

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