Is there css to make the look of IE and Chrome the same? As you can see, what I have in a table in IE, goes to the end of the table. It is much higher in Chrome. FF is better than Chrome, but I would like the email input going all the way down to the end of the table.
My body tag is:
topmargin=“20” bottommargin=“20”
which is the dark blue and the same on each browser.
Thank you.
You may need to supply more code, both html and css to help diagnose the problem.
Either post the code here, or link to a live page.
Don’t expect to get what you want using those attributes
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body
bottommargin
The margin of the bottom of the body. This method is non-conforming, use CSS margin-bottom property on the element instead.
…
topmargin
The margin of the top of the body. This method is non-conforming, use CSS margin-top property on the element instead.
The bottom margins are the same and look the same. Yes, I will look at your link and see what I should use for bottom margins in the body tag.
But would that effect my issue with the end of the table being higher in Chrome vs IE?
Thank you for your input.
body {
margin-top: 20px;
margin-bottom: 20px;
}
Difficult to say without seeing the code that creates the problem.
My best guess would be the default styling of elements differs between the browsers. If so it could be overcome by explicitly setting the problem properties in css.
I stripped my other code out and this is the raw table properties that I am using. With the exact code below, same issue in that the IE browser has the email input at the bottom of the table. Chrome an FF raises up.
<style>
body {
margin-top: 20px;
margin-bottom: 20px;
}
</style>
</head>
<body bgcolor="4c659b">
<table align=center background="images/plainbg.png" width=960 border=0 bordercolorlight="136ed5"><tr><td>
<Table align=center cellspacing=15 width="100%"><tr>
<table align=center width="960"><tr>
<td width="320" align=left>
<form><font face=arial size=1 color="136ed5">
Sign-up for this...</font><br />
<input type="text" size="25" name="user" placeholder="YourName@example.com">
<input type="image" value="Submit" src="images/submitform.png" border=0></form>
</td>
<td width=320 align=center><font face=arial size=1 color=6c6b6b><b>© <%=year(now)%> domain name<br />All Rights Reserved</b></font></td>
<td width="320" align="right" valign=bottom>
<form><font face=arial size=1 color="136ed5">
Sign-up for this...</font><br />
<input type="text" size="25" name="user" placeholder="YourName@example.com">
<input type="image" value="Submit" src="images/submitform.png" border=0></form>
</td></tr></table>
</body>
</html>I’m seeing a 20px bottom margin of grey before it gets to the blue both in IE 11 and Chrome.
Which IE are you testing with?
OK, so when you get all that code properly indented so you can see what’s going on, then it becomes clear that the table structure is invalid.
You are nesting tables three deep, but there is only one closing table tag, not to mention further errors that break the table structure.
To be totally honest, this style of code pre dates Egyptian Hieroglyphics.
Rather that fighting this beast to get it into good shape it would be best to bring it into this millennium and start over styling the page with CSS instead of antiquated, over-complex table layouts and “presentational” attributes.
It’s the right thing to do.
Ouch! Don’t have the skill set you have.
IE 11 and works good in Edge.
It’s the only thing to do.
But we can rebuild it, we have the technology…
It’s is actually much simpler this way, that’s why it’s the preferred way.
This comes from a time before there was css, now there is css, you can use it.
working on example
Yes, thank you I know that. Unfortunately I need to take the time to learn it better. I understand it a little but need to be consistent and use it. Your comments are well received and valid.
Sorry, I got side-tracked last night and never posted the example, though I did knock something up. But it will have to wait until I get back home. I’ll also want to add some explanatory notes if you are new to css.
Thank you for your time and any type of notes for educational purposes would be appreciate. Take your time, no feel you have to rush.
The issue is that the form element has a 1em bottom margin in some browsers. If you add the following CSS it should fix the issue.
form{margin:0}
Google ‘reset stylesheets’ if you don’t understand what this means and why elements may be different between browsers.
Of course as already mentioned your table is invalid and broken and needs to be brought up to date so see what Sam comes up with 
Here is a basic example. It’s not a pixel perfect copy of your original, but can be tweaked to match more closely if needed.
You will see the html is much simpler now with presentation removed from it.
With indenting it’s much easier to make sense of it too.
For the purpose of the example, the css is in the head, but should really be removed completely from the html into its own file and linked from the head.
<!DOCTYPE html>
<html lang="en-gb">
<head>
<title>Sign Up</title>
<meta name=viewport content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
body {
margin: 20px; /* Margin for the body */
background: #4c659b;
font-family: arial, sans-serif; /* default font settings for whole page */
font-size: 100%;
line-height: 1.4;
}
main {
box-sizing: border-box;
background: #ddd; /* or your image here */
margin: 0 auto; /* make in centered */
width: 100%; /* Expand the width */
max-width: 960px; /* But no bigger than this */
padding: 1.5em; /* Give the elements inside some breathing space all round (including the gap at the bottom you want) */
border: none;
display: table; /* Make the container behave like a table, even though it's not a table */
/* Below commented is an alternative method */
/*display: flex;
justify-content: space-between;
flex-flow: wrap;*/
}
main > * {
display: table-cell; /* Make any direct descendant of the main element behave like a table cell (td) */
}
form {
color: #136ed5; /* Setting for any forms */
font-size: 0.9em;
}
label { display: block ;}
.copy { /* Settings for the middle bit */
color: #6c6b6b;
text-align: center;
font-size: 0.8em;
}
.copy p {
margin: 0.2em 0;
}
.right { /* Settings for the right hand form only */
text-align: right;
}
input { /* Settings for any input */
margin-right: 1em; /* This is instead of the nasty s that you had, always use margins or padding for that kind of thing */
}
/* This is to rearange things back to stacked column of blocks on smaller screens that can't accommodate the elements side by side */
@media screen and (max-width: 650px){
main, main > * {
display: block;
width: auto;
}
.left, .right {
text-align: center;
}
}
</style>
</head>
<body>
<main>
<form class="left">
<label for="left">Sign-up for this...</label>
<input id="left" type="text" size="25" name="user" placeholder="YourName@example.com">
<input type="submit" value="Submit">
</form>
<div class="copy">
<p>© <%=year(now)%> domain name</p>
<p>All Rights Reserved</p>
</div>
<form class="right">
<label for="right">Sign-up for this...</label>
<input id="right" type="text" size="25" name="user" placeholder="YourName@example.com">
<input type="submit" value="Submit">
</form>
</main>
</body>
</html>
Thank you for the CSS code. I will look at it and get back to you. Thank you!
Thank you again for the CSS lesson. I appreciate that and will learn to use this.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.