We help IT Professionals succeed at work.

html template looks different in IE than Firefox?

DantechIT
DantechIT used Ask the Experts™
on
http://dantechmsp.com/tds/site_pro/index.html

The yellow box that says "technology solutions to fit your needs" looks fine in firefox but does not line up with the others in IE. How can that be?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Author

Commented:
I noticed that I have a IE7.css file. Could that have something to do with it?
Carlos LlanosIT Manager

Commented:
Absolutely, I'll be able to look at it when I get home in a few hours, but FF, Safari, and IE have their own standards for CSS on some things.  I would head over to w3schools and check out how to design it to be cross-browser compatible.

Author

Commented:
What should I look for? What wouldn't be compatible?
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
It looks the same in Firefox 5 and IE8.  Classically, IE has had slightly different margins on some things.  But you have a CSS reset in there that is intended to take care of that.

Author

Commented:
It looks the same? Maybe it's my computer.
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
Have you 'refreshed' your browser to make sure it has the latest version of the page?  Ctl-F5

Author

Commented:
yeah, I refreshed it, cleared cache, still looks wrong. see pic  screenshot
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
In my IE8, the yellow section may be 1 pixel shorter but not like your pic above.

Author

Commented:
Wow, that's weird. Can you do me a favor and post a screenshot of it. If it's not noticeable I'll leave it alone.
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
here you go
dantech.jpg

Author

Commented:
that's going to bug me. Do you know of a way to pad that down? I see the read more button is higher than the others, maybe bump it down 1px? Any idea on how to do that?
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
Interesting.  In Firefox it is 6 pixels higher than the other two buttons.  I see what the problem is.  You are using <p>&nbsp;</p> in the left and middle sections for spacing but you can't in the right because it has more text.  You will never get it to line up 'perfectly' with that method.  The buttons need to be absolutely positioned and I would do it from the bottom of that div that contains them.  

Author

Commented:
I am a bit confused when you say " The buttons need to be absolutely positioned and I would do it from the bottom of that div that contains them." Can you elaborate please?
Fixer of Problems
Most Valuable Expert 2014
Commented:
Normal positioning is 'relative' which means that the browsers places objects on the page in the order it finds them in the file.  The odd thing is that if you add 'position:relative;' to the CSS for an object, it marks it as 'positioned'.  Certain things like 'z-index' only apply to 'positioned' objects.  If you add 'position:absolute;' to the CSS for an object, it can be positioned inside it's current container object like another 'div' by using the 'top', 'left', 'right' or 'bottom' CSS attributes.

Here is a simple demo page that you can play around with to see what happens when you change things.  Note that the position of the text 'button's does not depend on the other content.  If you remove the 'position:relative;' from the 'wrap' id or the 'inner' class, you will see that some things don't work right
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>CSS positioning</title>
<style type="text/css">
<!-- 
#wrap {position:relative;width:906px;height:482px;margin-left:auto; margin-right:auto;border: 1px solid black;}
.inner {position:relative;float:left;width:300px;height:400px;border: 1px solid red;}
.button {position:absolute;top:300px;left:120px;background-color:#00ff00;color:#ffffff;}
-->
</style>
</head>
<body>
<div id="wrap">
<h1>CSS positioning</h1>
<div class="inner">111
<p class="button">Button here</p>
</div>
<div class="inner">222<br>222<br>
<p class="button">Button here</p>
</div>
<div class="inner">333<br>333<br>333<br>
<p class="button">Button here</p>
</div>
</div>
</body>
</html>

Open in new window

Author

Commented:
Thank you.


Can you tell me if it is crooked now?
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
Yes, now all three boxes are different heights.  You also need to make the same height.