PDA

View Full Version : IE 7 will not respond to CSS commands


johnMoss
04-24-2011, 04:09 PM
http://www.shop17printers.com/banners.html

Down at the bottom you see a logo and below it a click to submit button. You will see they line up fine, as in centered. In IE 7 regardless, and IE8 with Windows Vista, the browser is adding what looks like 15px of internal padding to either side of the text inside the button, hence elongating it and thus giving the appearance of off center in relation to the logo. Simply put, the button still begins at the same position, but is made 30 px longer. There are several ostensibly simple solutions, but IE 7 will not respond to any css commands that I have tried, even doing an IE 7 hack for the logo itself to recenter it would not work.

<tr><div id="click">
<td colspan="2" style="padding-top:10px"><input class="button np inf-button" value="Click To Get Us Shopping!" type="submit" id="Submit" name="Submit" /></td></div>
</tr>
#click {
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 285px;
}

Later browsers respond to css changes, but above I have tried style commands in both the colspan field and the input class fields, and get no change for IE 7.
In the end, regardless of the thickness of button, as long as it's centered in relation to the logo, I'm good...

Anyone with suggestions on where I'm going wrong?

DWcourse
04-24-2011, 06:24 PM
John, you've got to be a bit more Zen about things. Instead of forcing things to go exactly where you want them you have to make them want to be there. Try this:

#click {
padding: 0;
text-align: center;
}

That puts the button in the center no matter what else is going on.

And, you can do the same for the bottomButton div.

In fact there's no reason not to put both those into the same div.

BTW,the problem wasn't just IE.

johnMoss
04-24-2011, 07:03 PM
BTW,the problem wasn't just IE.

I haven't perfectly centered the logo until I resolve the button issue. I had left the margin settings as it was the last thing I tried. I've gone back in and used text-align on both the image and the button. I did do this before but it doesn't resolve the problem. The primary issue of the left & right padding being added (IE 7) internally inside the button still remains. One would assume the use of centering would negate the issue of added padding but yet it does not. In IE 7 the logo appears off to the left of center relative to the button. Weird...

DWcourse
04-24-2011, 10:44 PM
But you really shouldn't try to center anything using margin-left. Using margin like that means anything that affects the width of the button will mess up the centering. (BTW, when you use text-align: center on an object, any margin you have on objects within that object will affect centering)

And to control the padding on the submit button you should be able to use a #Submit style rule since that's the id of the button.

domedia
04-25-2011, 01:49 PM
Is there a link John?
You can't put an element between a TR and a TD.

DWcourse
04-25-2011, 01:56 PM
Is there a link John?
You can't put an element between a TR and a TD.

True! Although the page I looked at (http://www.shop17printers.com/banners.html) didn't have that.

domedia
04-25-2011, 03:19 PM
ah missed the link

domedia
04-25-2011, 03:25 PM
Best thing you can do is let the browser/OS handle the form elements.
If not, you're going to get *really* frustrated once you realize that some thing scan not be changed with CSS :)

johnMoss
04-25-2011, 03:29 PM
You can't put an element between a TR and a TD.
Exasperation in motion... I know I'm working with disallowed scripting, but I've seen this done in the past so thought I'd give it a shot. It doesn't validate obviously, but in the moment I'm getting away with it.
Jim, I went ahead & removed it (#click) and subbed in #submit. At which point the submit button fell into the flow and would not respond to CSS input. In the moment I've put #click back in.
Has anyone loaded the page into IE tester to see what I'm referring to?
IE 7 isn't that big of a deal, except that the problem is also occurring with IE 8 / windows vista.

My key problem is the added internal padding to the submit button that is occurring in IE 7.

DWcourse
04-25-2011, 04:31 PM
What I said should work. However if you're really concerned about padding on the submit button in IE7 just add the overflow:visible property to the button.

This should do it all for you (working sample at http://student.dominatedreamweaver.com/test.html)

<style type="text/css">
.centerText {
text-align: center;
}
#bottomButton {
width: 940px;
margin-right: auto;
margin-left: auto;
border: thin solid #000;
}
span.theButton input {
padding:5px;
overflow: visible;
}
</style>


<div id="bottomButton"><input class="check" value="1368" type="checkbox" checked="checked" id="infusion_option_54" name="infusion_option_54" /><img src="/slices/spacer.gif" width="10px" height="1px" />
Sign up today for <em>Killer</em> online and offline marketing tips!
<p class="centerText"><img src="shop17LogoMini.gif" width="100" height="34" alt="logo" align="top"/></p>
<p class="centerText">
<span class="theButton"><input class="button np inf-button" value="Click To Get Us Shopping!" type="submit" id="Submit" name="Submit" /></span>
</p>
</div>

FYI, *##% IE7 just hung so I'm rebooting and haven't had a chance to double check it yet.

domedia
04-25-2011, 05:48 PM
My key problem is the added internal padding to the submit button that is occurring in IE 7.

I know you want this solved John, but imho this is not your key problem. The key problem is to get the button to center cross browser. (my interpretation of your key problem of course 8) ) My comment still stands on trying to make form elements look the same cross browser. It's just not going to happen. Look at how file upload input fields and check boxes render differently on PC/MAC.

Did you try setting a width on the input element?
That might work. But again; setting a left margin is not how you center stuff.

.

johnMoss
04-29-2011, 04:59 AM
Been tapped a couple days & haven't responded... Thank you Jim, I'll load this up & verify....

johnMoss
04-29-2011, 05:15 AM
Did you try setting a width on the input element?
That might work. But again; setting a left margin is not how you center stuff.

I concede, I just couldn't get these table objects to respond to in-line
html commands. Truth be told my experience with tables is limited to lick'm stick'm design editors and as i go through the learning sequence I have focused on css & bypassed tables as they are in phase-out. The only reason this one is set up like it is is due to it's link to infusion-soft. I've managed to get it centered now so good to go though...