Microsoft.AspNetCore.Mvc.Localization.LocalizedHtmlStringCSS margin problem with IE

Author : Adjunkten
Subject : CSS margin problem with IE
Posted : 01 July 2008, 02:14
Message :

I have site integrated my forum but body margins won't work in IE7. It looks fine in Firefox and Opera.
My body-CSS:

body { max-width: 1000px;
min-width: 800px;
margin: 0 auto;}

I suspect the tablecode is causing the problem, since margins are OK on pages outside my forum folder. I tried to "css" the table without succes. Do you know the trick?
http://www.adjunkten.dk/forum/default.asp
<moved from="Help: General / Current Version (v3.4.xx)" by="Shaggy" /><

Reply Author: MarcelG
Replied on: 01 July 2008, 03:22
Message:

Max-width and Min-width are not supported in IE afaik. I've worked around this by using an expression:

Code:

.maxw {
margin-left: auto;
margin-right: auto;
max-width:1000px; 
width:expression(document.body.clientWidth > 1000? "1000px": "auto" );  
visibility: visible;
text-align: center;}

I'm not sure what the min-width replacement should be, as the code I use only does something with the max-width, but it'll give you an idea to start off with.<

Reply Author: Adjunkten
Replied on: 01 July 2008, 04:02
Message:

Thankyou, but it doesn't work. Your code is in my css now.
<

Reply Author: HuwR
Replied on: 01 July 2008, 05:51
Message:

ok, strictly speaking you should not be assigning width attributes to the body tag, add a page container div and size that instead. it does not make sense to size the body tag since the body tag corresponds to the browser window.<

Reply Author: MarcelG
Replied on: 01 July 2008, 06:03
Message:

Oops, that's right ; in my CSS the above CSS style is not assigned to body, but to a div called maxw. I've put all content in that div. Reference: http://oxle.com/uploaded/screen.css<

Reply Author: HuwR
Replied on: 01 July 2008, 06:15
Message:

also to set a min-width that works in IE6 and below, use the following.
.maxw {
margin-left: auto;
margin-right: auto;
width:auto !important;
width:800px; max-width:1000px;
width:expression(document.body.clientWidth > 1000? "1000px": "auto" );
visibility: visible;
text-align: center;}

that will use auto for the width in FF/IE7 and 800px for the width in IE6 (width in IE6 is allways it's min-width)

also, IE6 does not support margin-auto so you need to do the following
body {text-align: center}
.maxw {
margin-left: auto;
margin-right: auto;
width:auto !important;
width:800px;
max-width:1000px;
width:expression(document.body.clientWidth > 1000? "1000px": "auto" );
visibility: visible;
text-align: left;}<

Reply Author: Adjunkten
Replied on: 01 July 2008, 06:18
Message:

Thankyou for your time.
I added a .container with the width specs to the css and added "<div class="container">" in the top of my inc_site_header.

IE still stretches width to fit screen size, which looks stupid on widescreen .

<

Reply Author: HuwR
Replied on: 01 July 2008, 06:23
Message:

what version of IE are you using, I know this works in IE as I use it all the time, so there must be something wrong in your page<

Reply Author: Adjunkten
Replied on: 01 July 2008, 06:24
Message:

Originally posted by HuwR
also to set a min-width that works in IE6 and below, use the following.
.maxw {
margin-left: auto;
margin-right: auto;
width:auto !important;
width:800px; max-width:1000px;
width:expression(document.body.clientWidth > 1000? "1000px": "auto" );
visibility: visible;
text-align: center;}

that will use auto for the width in FF/IE7 and 800px for the width in IE6 (width in IE6 is allways it's min-width)

Tried that too in .container. Only resizes topbar.
Maybe I have to consider another design, and this time start with IE. GRRR.<

Reply Author: Adjunkten
Replied on: 01 July 2008, 06:27
Message:

Huwr, I use IE7, vers. 7.0.5730.13.
What I don't understand is the difference between FF and IE. Doesn't IE7 respect W3C standards?<

Reply Author: HuwR
Replied on: 01 July 2008, 06:28
Message:

what do you mean by it only sizes the topbar? this would indicate you haven't put the closing div tag in the correct place maybe<

Reply Author: HuwR
Replied on: 01 July 2008, 06:29
Message:

yes IE7 should not give you a problem, howvere as I stated above width is NOT an attribute for body, if FF interprets it as such then it is FF that is not complying with the standards.<

Reply Author: Adjunkten
Replied on: 01 July 2008, 06:29
Message:

Here's my inc_site_header:

<div class="container">
<div class="topbar">
<div class="adjunkten">Adjunktens forum</div>
<div class="righttop"><div class="afterdark">after dark</div></div>
<div class="topmenu"></div>
</div><

Reply Author: HuwR
Replied on: 01 July 2008, 06:32
Message:

Originally posted by Adjunkten
Here's my inc_site_header:

<div class="container">
<div class="topbar">
<div class="adjunkten">Adjunktens forum</div>
<div class="righttop"><div class="afterdark">after dark</div></div>
<div class="topmenu"></div>
</div>

ok, so where is the closing </div> for container, is this in your inc_site_footer ?<

Reply Author: Adjunkten
Replied on: 01 July 2008, 06:51
Message:

Yup. Site footer:

</div>
<div id="kontaktoplysninger">

</div>
<

Reply Author: HuwR
Replied on: 01 July 2008, 06:57
Message:

I'm afraid you will need to get some help from Image forums as you are using their version of the forum not a base version, so unfortunately I can not comment on the markup/code used in your forum.<

Reply Author: HuwR
Replied on: 01 July 2008, 06:59
Message:

I did a quick view source on your default.asp page and you are not adding the div in the correct place, you should put it immediately after the body tag not inside the main table as you have.<

Reply Author: Adjunkten
Replied on: 01 July 2008, 10:50
Message:

Yes - I think you're right. I have to get rid of some html before the site header.

The HTML looks like this:

<body>

<a name="top"></a><font face="Bookman Oldstyle, Trebuchet">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> (inc_site_header.asp)

I would like remove the red code.
I found the codelines in the inc_header.asp - but if I simply delete these lines before the 'inc site header' I get an error message.
"<body>" & vbNewLine & _
"<a name=""top""></a><font face=""" & strDefaultFontFace & """>" & vbNewLine
if strSiteIntegEnabled = "1" then
response.write "<table width=""100%"" border="""
if strSiteBorder = "1" then
response.write "1"
else
response.write "0"
end if
response.write """ cellspacing=""0"" cellpadding=""0"">" & vbNewLine
if strSiteHeader = "1" then
response.write " <tr>" & vbNewLine & _
" <td"
if strSiteLeft = "1" or strSiteRight = "1" then
if strSiteLeft = "1" and strSiteRight = "1" then
Response.write " colspan=""3"""
else
Response.write " colspan=""2"""
end if
end if
response.write ">"
%>
%>
<%

Can you help me ?
<

Reply Author: HuwR
Replied on: 01 July 2008, 10:53
Message:

try just removing the width="100%" from the first table tag<

Reply Author: Adjunkten
Replied on: 01 July 2008, 18:03
Message:

Changing table width is not working. No effect at all.

I guess I'll have to redesign or accept that my forum looks great in Opera and FF and stinks in IE. But the different looks in browser really puzzles me.
And by the way, setting body margins works in IE on all my other pages, which use the same stylesheet.
Here in DK it's time to hit the sack.
Thanks for your time.
<

Reply Author: HuwR
Replied on: 01 July 2008, 18:40
Message:

you need to add your opening div tag after the body tag here "<body>" & vbNewLine & _
then make sure you close it after all the other table tags are closed in your footer<

Reply Author: HuwR
Replied on: 01 July 2008, 18:42
Message:

And by the way, setting body margins works in IE on all my other pages, which use the same stylesheet.

I didn't say you couldn't use margins, I said not to use widths.<

Reply Author: Adjunkten
Replied on: 02 July 2008, 16:37
Message:

Heureka! - Changed the table width and IE now centers the two tables in a 1000px wide container. Thumbs up Huwr.

Now I need to solve one last problem.
My topmenu is a simple included unordered list with 4 items, blog, dansk, historie, forum.
CSS:

.topbar ul, {text-align: left;
margin: 0;
padding: 0;}
.topbar li,{
list-style-type: none;
display: inline;

I use "display:inline", to make the list go horizontal. Again, it works in FF, Opera and IE except from the forum folder. Maybe because it is inside a table ?
Does anyone know how to "css" a list inside a table ?

<

Reply Author: AnonJr
Replied on: 02 July 2008, 16:47
Message:

Is that CSS included (in some way or fashion) on those pages?<

Reply Author: Adjunkten
Replied on: 03 July 2008, 02:33
Message:

No its external - <link rel="stylesheet" type="text/css" href="/2008.css"/><

Reply Author: HuwR
Replied on: 03 July 2008, 03:03
Message:

does the table have a class or id ?<

Reply Author: AnonJr
Replied on: 03 July 2008, 07:49
Message:

Does the link that is in your forum files actually point to the CSS file? (I ask only because its one of those often overlooked mistakes where you copy/paste the code and forget to adjust accordingly... been there, done that

)<

Reply Author: Adjunkten
Replied on: 03 July 2008, 08:33
Message:

HuwR: No. The html :

<body>
<font face="Bookman Oldstyle, Trebuchet">
<table width="1000px" align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div class="topbar">
<div class="adjunkten">Adjunktens forum</div>
<div class="righttop"><div class="afterdark">after dark</div></div>
<div class="topmenu"><ul>
<li><a href="/default.asp" title="Til forsiden">Blog</a> |</li>

<li><a href="/dansk.asp" title="Materiale til dansk" name="top">Dansk</a> |</li>
<li><a href="/historie.asp" title="Materiale til historie">Historie</a> |</li>
<li><a href="/forum/default.asp" title="Adjunktens forum med toptunet debat">Forum</a> |</li>
</ul></div>
</div></td>

AnonJr. : Well, when I play with the css fonts and colours the changes come through, so... but I've done that one, too

<

Reply Author: HuwR
Replied on: 03 July 2008, 08:42
Message:

not sure then, unless it is just not loading the css file, I did a simple test here and it seems to work fine using your css and html snippit<

Reply Author: HuwR
Replied on: 03 July 2008, 08:52
Message:

it looks to me like it was the erroneus commas that you had in your css, I have tested it and

.topbar ul {text-align: left;
margin: 0;
padding: 0;}
.topbar li{
list-style-type: none;
display: inline;
}

works fine, but ..
.topbar ul, {text-align: left;
margin: 0;
padding: 0;}
.topbar li,{
list-style-type: none;
display: inline;
}

does not work<

CSS margin problem with IE

Topic

Replies ...