Margin Styling Help for HTML Page in IE

Question

jessicaw 0 Newbie Poster

13 Years Ago

I have created a page http://www.northland.edu/page. The content looks fine in Firefox, however the sub_right_column_container is underneath the rotating image in IE. Here is my info:

[!mobileredirect!]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="[(site_url)]"></base>
{{headertagalumnirelations}}
<meta name="verify-v1" content="useSR4yAtTSl1p/FLntmcb+WgW3VfX3DvdrebQtkWeg=" />
<META name="y_key" content="ab70af893c2064e9">
</head>
<body>
<div id="main">
{{header}}
[!DisplayHomeAlerts? &test=`1` !]
<img alt="Alumni News & Events" style="padding-left:42px; padding-top:20px" src="/assets/images/Advancement/Alumni-News-Title.jpg" title="Alumni News and Events" width="354"/>
</div>
<table width="900" style="margin-left:35px; margin-top:-70px; padding-bottom:30px; padding-top:25px;" border="0" cellspacing="0" cellpadding="5">
<tr>
<td>
<script language="JavaScript1.2">


/***********************************************
* Flexi Slideshow- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/


var variableslide=new Array()


//variableslide[x]=["path to image", "OPTIONAL link for image", "OPTIONAL text description (supports HTML tags)"]


variableslide[0]=
variableslide[1]=
variableslide[2]=
variableslide[3]=
variableslide[4]=


//configure the below 3 variables to set the dimension/background color of the slideshow


var slidewidth='880px' //set to width of LARGEST image in your slideshow
var slideheight='322px' //set to height of LARGEST image in your slideshow, plus any text description
var slidebgcolor='#FFFFFF'


//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=5000


////Do not edit pass this line////////////////


var ie=document.all
var dom=document.getElementById


for (i=0;i<variableslide.length;i++){
var cacheimage=new Image()
cacheimage.src=variableslide[0]
}


var currentslide=0


function rotateimages(){
contentcontainer='<center>'
if (variableslide[currentslide][1]!="")
contentcontainer+='<a href="'+variableslide[currentslide][1]+'">'
contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">'
if (variableslide[currentslide][1]!="")
contentcontainer+='</a>'
contentcontainer+='</center>'
if (variableslide[currentslide][2]!="")
contentcontainer+=variableslide[currentslide][2]


if (document.layers){
crossrotateobj.document.write(contentcontainer)
crossrotateobj.document.close()
}
else if (ie||dom)
crossrotateobj.innerHTML=contentcontainer
if (currentslide==variableslide.length-1) currentslide=0
else currentslide++
setTimeout("rotateimages()",slidedelay)
}


if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')


function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub
if (document.layers)
document.slidensmain.visibility="show"
rotateimages()
}


if (ie||dom)
start_slider()
else if (document.layers)
window.onload=start_slider


</script>


<ilayer id="slidensmain" width=&{slidewidth}; height=&{slideheight}; bgColor=&{slidebgcolor}; visibility=hide><layer id="slidenssub" width=&{slidewidth}; left=0 top=0></layer></ilayer>
</td>
</tr>
</table>
<div id="left_column_container">
<div class="container_padding" style="padding-top: 1px;"></div>
<div class="clear" style="height: 5px;"></div>
<a href="/give.htm" style="padding-left:25px; padding-top:20px;" target="_self"><img src="/assets/images/Advancement/Give-Mag.jpg" alt="Give Today" /></a>
<div class="container_padding" style="padding-left: 46px; margin-top:-65px;">
<table width="200" style="margin-left:-45px; padding-bottom:30px; padding-top:25px;" border="0" cellspacing="0" cellpadding="5">
<tr>
<td><img alt="Links" style="padding-left:30px; padding-bottom:10px; width:120px;" src="/assets/images/Advancement/links-image.jpg" alt="Links" /><br />
<div style="padding-left: 50px;">
<a href="http://www.northland.edu/alumni-reunion.htm"><strong>Alumni Reunion</strong></a></br>
<a href="http://www.northland.edu/golf.htm"><strong>Scholarship Golf Classic</strong></a></br>
<a href="http://www.northland.edu/toast.htm"><strong>Senior Champagne Toast</strong></a></br>
<a href="http://www.northland.edu/alumni-association.htm"><strong>Alumni Association</strong></a></br>
<a href="http://www.northland.edu/alumni-news.htm"><strong>Alumni in the News</strong></a></br>
<a href="http://www.northland.edu/northland-in-the-news.htm"><strong>Northland in the News</strong></a></br>
<a href="http://www.northland.edu/alumni-volunteer.htm"><strong>Volunteer</strong></a></br>
<a href="http://www.northland.edu/register/index.php?id=20"><strong>Update Your Information</strong></a></br>
</div>
<div class="clear" style="height: 10px;"></div>
<div class="clear" style="height: 10px;"></div>
<a href="http://www.facebook.com/northlandalumni" target="_blank" style="padding-left:50px; width:75px;"><img src="http://www.northland.edu/assets/images/Advancement/Alumni-FB.jpg" alt="Alumni Facebook Page" /></a></br>
<div class="clear" style="height: 5px;"></div>
<a href="http://www.linkedin.com/groups?mostPopular=&gid=3730800&trk=myg_ugrp_ovr" target="_blank" style="padding-left:50px; width:100px;"><img src="assets/templates/nc/images/linkedin.jpg" alt="Northland College on LinkedIn" /></a></br>
<div class="container_padding" style="padding-top: 1px;"></td>
</td>
</tr>
</table>
[!&ql_url_1=`[*ql_url_1*]` &ql_copy_1=`[*ql_copy_1*]`  &ql_url_2=`[*ql_url_2*]` &ql_copy_2=`[*ql_copy_2*]`  &ql_url_3=`[*ql_url_3*]` &ql_copy_3=`[*ql_copy_3*]`  &ql_url_4=`[*ql_url_4*]` &ql_copy_4=`[*ql_copy_4*]` &ql_url_5=`[*ql_url_5*]` &ql_copy_5=`[*ql_copy_5*]`!]
</div>
<p></p>
<div class="container_padding" style="padding-top: 1px;"></div>
<div class="clear" style="height: 5px;"></div>
</br>
</div>
<div id="sub_right_column_container">
<div class="clear" style="height: 20px; padding-left:0px; margin-top:-530px;"></div>
<div class="sub_right_column_container_padd">
<div id="sub_left_copy">
[*#content*]
[!DisplayDirectory? &displaydirectory=`[*includeSnippets*]` &displayGroup=`[*directoryGroup*]` &forcedisplayid=`[*forcedisplayid*]` &forcedisplayprofile=`[*forcedisplayprofile*]` !]
</div>
<div id="sub_right_copy">
<div style="padding-bottom: 10px; padding-top:15px;">[!DisplaySmallCalendar? &showCategory=`[*smallCalendarCats*]`  &displayCal=`[*includeSnippets*]` !]</div>
<div style="padding-bottom: 10px;">[!meetStudents? &showMS=`[*includeSnippets*]` !]</div>
[!showContactInfoRight? &showContact=`[*includeSnippets*]` &displayid=`[*contactToShow*]` !]
<div style="padding-bottom: 10px;">[!DisplayRightPhotoGallery? &showCategory=`[*photoGalleryCats*]`  &displayPg=`[*includeSnippets*]`!] </div>
<h3>[*callOutCopyHeader*]</h3>
<p>[*callOutCopy*]</p>
</div>
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
{{footer}}
</div>
</body>
</html>

Thank you for your help. I really appreciate it!

html-css web-design

Edited 11 Years Ago by TrustyTony because: fixed formatting

4 Contributors
10 Replies
159 Views
3 Weeks Discussion Span
Latest Post 12 Years Ago Latest Post by raphie

Dandello 8 Posting Whiz in Training

13 Years Ago

At a guess - since we don't have all your css - the div just inside of the 'sub_right_column_container' has a margin of -350px and for some reason (maybe a float not cleared in the column ahead of it or some vagary of how MSIE treats text sizes and/or margins) the contents of that div is being pushed up under the rotating graphic.

What I seriously suggest is trying to combine as many of those divs as you can to simplify your code. What I see on the main page is a vertical column containing a large top block above a simple three column layout. At the bottom is text outside of the main column on the far right and left.

Instead of using divs to style your elements, style the elements. There is also no reason to have a div the size of the entire body - style the body. If you're using the divs to keep things straight - use comments instead.

Based on what I see, you can probably get down to 5 divs (maybe 6) - one for the main center (maybe one for the rotating graphic) and 4 to create the three column effect. (and of course 2 elements with a class='clear' to clear the floats making up the 3 column effect.)

Hope this helps.

raphie 3 Light Poster

13 Years Ago

You might need to create and CSS specially for IE and added in the source code... example:

<!--[if IE]>
<style>
#sub_right_column_container {
    margin-top:80px;
}
<!-- or external link -->
</style>
<link type="txt/css" href="/css/ie_hacks.css" rel="stylesheet" media="all" />
<![endif]-->

Between the <head> tags.

It happens to me in a page I designed with Wordpress, any browser view it in a way and IE other way. rodolfofont.com

Edited 13 Years Ago by raphie because: Error CSS example

Dandello 8 Posting Whiz in Training

12 Years Ago

While the problem may be in the css of that one element behaving badly in MSIE, there may (and probably are) complicating factors with other elements. Simplicity in code is usually a good thing - getting the divs down to a minimum, styling the semantic elements, using lists for things that are lists. That way you can find the offending code more easily - then you can look at hacks if they are needed.
The problem that shows up in MSIE may be a symptom of something else that the other browsers are 'fixing' and MSIE isn't.

raphie commented: I have to agree with Dandello, very knowledgeable +2

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

salebbcsc888 0 Newbie Poster · Answer 1 · 2011-10-31T07:54:42+00:00

salebbcsc888 0 Newbie Poster

13 Years Ago

I think is wrong in css

Dandello 8 Posting Whiz in Training · Answer 2 · 2011-10-31T08:10:41+00:00

Without seeing all the css, we don't know exactly where the problem is.

raphie 3 Light Poster · Answer 3 · 2011-11-02T06:00:07+00:00

I think is wrong in css

The technique you use to manipulate your page is not an issue of wrong or right. There are standards for CSS3 that Internet Explorer hasn't updated while the rest of the browsers have.

Even Microsoft is forcing their customer to buy the new operating system if they want to have support.

This technique is widely use in web design. As I said, is not a matter of rigth or wrong is a matter of browsers incompatibility.

raphie 3 Light Poster · Answer 4 · 2011-11-06T13:44:55+00:00

There's another solution that you might want to look at in the browsers discrepancies that might suit you better, I just find it and is quite interesting.

Check this! Using the same conditional in a more elegant manner.

raphie 3 Light Poster · Answer 5 · 2011-11-19T10:28:42+00:00

OK, this is what I found...

As Dandello said you have to many unnecessary div that you're actually using to hack the browsers. For example you have a div with class clear with a margin-top set to -530px over your problematic div sub_right_column_container. This force the problematic div to be move to the right of the div class container_padding.

Here is the problem, sometimes IE does not set any height or width to empty div's as well firefox, but from time to time firefox fix the problem. Google and any Webkit browser accept any pre-configuration made by the css even if the div is empty.

Because your div's are overlapping one above the other, they do not align side by side even if you set the display to inline-block. What I did in the developer tool was delete every empty div class clear remove the right padding of the child div from the div that's supposed to be on the left, and set the width of the sub_right_column_container to 700px; a Voilá, the div align side by side.

Now, Internet Explorer, because is doesn't giving any property to the div class clear before the sub_right_column_container div, then the margin-top set to -530px to the div class clear is pulling your div sub_right_column_container bellow the presentation. Because the presentation is set by JavaScript the HTML DOM understand that the last element entered is the slider and appear above your columns.

Hope this help a little, the problem in not only CSS is excessive div's with hacks as Dandello said, so, any other hack will not work.

If you set your page to an specific width your elements inside the main container should not sum more than that specific with counting the paddings and margins, for example a div with a width of 200 pixels with a padding of 5px in all corners make the div width to increase to 210px or 208px (firefox) and of course, IE has some predetermine margins for DOM Elements that you need to consider... Instead of using pixels in your elements use percentages instead...

For example, if you have three elements that should align with each other inside another element do not set the percentage to 33%, because with padding and margins this will force one of the elements to be push down. Use 30% or less, test and trial until all elements fits, set the overflow of the elements to hidden if you don't want to show scroll bars or use overflow-x:auto for scrolling horizontally and overflow-y:auto for scrolling vertically.

That should solve your problem, keep me posted. I tried to copy the HTML code but developers tools don't let me copy the full code.

And by the way, Dandello, you can see the full CSS system using any developer tool, F12 in Safari, Chrome or Internet Explorer, the only problem is that you can't download it. Unless you save the page.

Dandello 8 Posting Whiz in Training · Answer 6 · 2011-11-19T10:38:35+00:00

I tend to use FireBug when analyzing code issues. Although MSIE has good developer tools too, my tactic is to get simple and working and then worry about how IE breaks it.

raphie 3 Light Poster · Answer 7 · 2011-11-19T10:55:23+00:00

Yes I love FireBug but don't know why for some reason is staying behind all of Firefox latest updates and Firefox disable it for few days until a new update is made to FireBug, so I'm using Chrome developers tool that is a copy of IE developer tools but with the new HTML5 capabilities. Then at last I filter everything out with IE to see all the errors that the other browsers didn't find...;)