Please take a look at this site (<!-- m --><a class="postlink" href="http://www.darrenbayley.com/dabovilla/index.php">http://www.darrenbayley.com/dabovilla/index.php</a><!-- m -->)
I am trying to get IE to display the page exactly as it appears in Firefox.
Unfortunately I am encountering 3 main problems.
1. The most obvious - centering of the body
Using:
margin: 40px auto -1px auto;
2. The picture makes the menu div expand to fit in IE.
Using: position: relative;
background-image: url("images/house.gif");
width: 278px;
height: 194px;
top: 200px;
3. The 2/3 pixel gap between the blue and orange lines.
Using: padding-left: 25%; - is this causing this problem?
I want it to look exactly like it does in FF, but am pulling my hair out changing my padding, margin, top and left values to try and get them to fit properly.
If anyone can provide any pointers I would be grateful!Try using a complete DTD : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <!-- m --><a class="postlink" href="http://www.w3.org/TR/html4/strict.dtd">http://www.w3.org/TR/html4/strict.dtd</a><!-- m --> ">OK, done that, but still no real difference. Any other ideas to where I am going wrong?For the second thing, try this : #content {
background-color: #F0F0F0;
margin-left:280px;
}
#menu {
float: left;
width:280px;
}Thanks for the suggestion, amended as suggested, but no change unfortunately. Am I missing something obvious here?Well, you put the wrong numbers - I said 280px and you put 200px.I tried 280px, but it made no difference, that is why there is a smaller px value now. But thank you for the help nonetheless.<!-- m --><a class="postlink" href="http://bonrouge.com/test/dabovilla.htmMany">http://bonrouge.com/test/dabovilla.htmMany</a><!-- m --> Thanks for the assistance. Your time has been appreciated!
I am trying to get IE to display the page exactly as it appears in Firefox.
Unfortunately I am encountering 3 main problems.
1. The most obvious - centering of the body
Using:
margin: 40px auto -1px auto;
2. The picture makes the menu div expand to fit in IE.
Using: position: relative;
background-image: url("images/house.gif");
width: 278px;
height: 194px;
top: 200px;
3. The 2/3 pixel gap between the blue and orange lines.
Using: padding-left: 25%; - is this causing this problem?
I want it to look exactly like it does in FF, but am pulling my hair out changing my padding, margin, top and left values to try and get them to fit properly.
If anyone can provide any pointers I would be grateful!Try using a complete DTD : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <!-- m --><a class="postlink" href="http://www.w3.org/TR/html4/strict.dtd">http://www.w3.org/TR/html4/strict.dtd</a><!-- m --> ">OK, done that, but still no real difference. Any other ideas to where I am going wrong?For the second thing, try this : #content {
background-color: #F0F0F0;
margin-left:280px;
}
#menu {
float: left;
width:280px;
}Thanks for the suggestion, amended as suggested, but no change unfortunately. Am I missing something obvious here?Well, you put the wrong numbers - I said 280px and you put 200px.I tried 280px, but it made no difference, that is why there is a smaller px value now. But thank you for the help nonetheless.<!-- m --><a class="postlink" href="http://bonrouge.com/test/dabovilla.htmMany">http://bonrouge.com/test/dabovilla.htmMany</a><!-- m --> Thanks for the assistance. Your time has been appreciated!