IE cutting a web page created using Dreamweaver

julian_s · 01-30-2006, 09:55 PM

Hi, sorry for posting a completely windows question, but there's a lot of people in this forum with a great knowledge about this kind of stuff, and also the linux community tends to respond a lot quicker

The thing is that I created my very first page yesterday using DreamweaverMX 2004 and a predefined CSS style with left navigation and 2 columns, and the thing is that when I use Internet Explorer to see it, sometimes it cuts a part of the information I put in the right side, in firefox works fine.

I know a little bit of html so I looked at it in Dreamwever but I didn't find anything unusual.

I hope you guys know how to solve this....

SciYro · 01-30-2006, 11:31 PM

so you know "html" big deal. But do you know "iehtml"? No, ok then, dont bother googling, i made that word up. m$ has IE use broken html, nonstandard stuff, and lack of stuff, what you are seeing might be the result of that. I stress "might". But i am suprised something as popular as dreamwhatever doesnt get IE right, usally, its the mozilla rendering that most people complain about.

pixellany · 01-31-2006, 12:54 AM

My impression is that, if you follow the instructions in most books, ANY browser will read it. Suggest you post some code snippets, so we can see what the issue might be.

julian_s · 01-31-2006, 08:17 PM

This is the link to the page, if you check the "Miembros" link you will see that it resizes randomly if you use IE, and sometimes you can only see a part of the content.

If you hover the mouse over the links in the left side it'll also resize.

PD: Thank's for the quick reply, you guys are the best

vharishankar · 01-31-2006, 08:48 PM

I see what you mean. It's definitely a CSS issue. IE is very finicky about widths, heights, paddings, margins etc. Post your CSS here so that people can see what is wrong with it.

Incidentally my own blog was rendering like crap in IE till recently and then I had to remove some unnecessary padding and widths in the CSS. One problem is that paddings affect the overall width of DIV in IE while it doesn't in most other browsers.

trickykid · 02-01-2006, 05:49 AM

In my findings, IE is the worst when it comes to rendering CSS. That is the one thing that always gets me as I design pages that work with W3C standards before I code for IE, if it's really bad, I'll find a workaround though.

julian_s · 02-01-2006, 08:08 PM

Here is the css that I use:

Quote:

/***********************************************/
/* 2col_leftNav.css */
/* Use with template 2col_leftNav.html */
/***********************************************/

/***********************************************/
/* HTML tag styles */
/***********************************************/

body{
font-family: Arial,sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px;
padding: 0px;
}

a:link, a:visited, a:hover {
color: #006699;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}
/* overrides decoration from previous rule for hovered links */

h1, h2, h3, h4, h5, h6 {
font-family: Arial,sans-serif;
margin: 0px;
padding: 0px;
}

h1{
font-family: Verdana,Arial,sans-serif;
font-size: 120%;
color: #334d55;
}

h2{
font-size: 114%;
color: #006699;
}

h3{
font-size: 100%;
color: #334d55;
}

h4{
font-size: 100%;
font-weight: normal;
color: #333333;
}

h5{
font-size: 100%;
color: #334d55;
}

ul{
list-style-type: square;
}

ul ul{
list-style-type: disc;
}

ul ul ul{
list-style-type: none;
}

label{
font: bold 100% Arial,sans-serif;
color: #334d55;
}

/***********************************************/
/* Layout Divs */
/***********************************************/

#masthead{
margin: 0;
padding: 10px 0px;
border-bottom: 1px solid #cccccc;
width: 100%;
}

#navBar{
margin: 0 79% 0 0;
padding: 0px;
background-color: #eeeeee;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}

#content{
float:right;
width: 75%;
margin: 0;
padding: 0 3% 0 0;
}

/***********************************************/
/*Component Divs */
/***********************************************/

#siteName{
margin: 0px;
padding: 0px 0px 10px 10px;
}

/*************** #pageName styles **************/

#pageName{
padding: 0px 0px 10px 10px;
}

/************* #globalNav styles **************/

#globalNav{
color: #cccccc;
padding: 0px 0px 0px 10px;
white-space: nowrap;
}
/* 'nowrap' prevents links from line-wrapping if there are too many to fit in one line
this will force a horizontal scrollbar if there isn't enough room for all links
remove rule or change value to 'normal' if you want the links to line-wrap */

#globalNav img{
display: block;
}

#globalNav a {
font-size: 90%;
padding: 0px 4px 0px 0px;
}

/************* #breadCrumb styles *************/

#breadCrumb{
font-size: 80%;
padding: 5px 0px 5px 10px;
}

/************** .feature styles ***************/

.feature{
padding: 0px 0px 10px 10px;
font-size: 80%;
}

.feature h3{
padding: 30px 0px 5px 0px;
text-align: center;
}

.feature img{
float: left;
padding: 0px 10px 0px 0px;
margin: 0 5px 5px 0;
}
/* adjust margins to change separation between the feature image and text flowing around it */

/************** .story styles *****************/

.story{
clear: both;
padding: 10px 0px 0px 10px;
font-size: 80%;
}

.story p{
padding: 0px 0px 10px 0px;
}

/************* #siteInfo styles ***************/

#siteInfo{
clear: both;
border: 1px solid #cccccc;
font-size: 75%;
color: #cccccc;
padding: 10px 10px 10px 10px;
margin-top: -1px;
}
/* negative top margin pulls siteinfo up so its top border overlaps (and thus lines up with)
the bottom border of the navBar in cases where they "touch" */

#siteInfo img{
padding: 4px 4px 4px 0px;
vertical-align: middle;
}

/************* #search styles ***************/

#search{
padding: 5px 0px 5px 10px;
border-bottom: 1px solid #cccccc;
font-size: 90%;
}

#search form{
margin: 0px;
padding: 0px;
}

#search label{
display: block;
margin: 0px;
padding: 0px;
}

/*********** #navBar link styles ***********/

#navBar ul a:link, #navBar ul a:visited {display: block;}
#navBar ul {list-style: none; margin: 0; padding: 0;}

/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: 1px solid #EEE;}

/* fix for browsers that don't need the hack */
html>body #navBar li {border-bottom: none;}

/*********** #sectionLinks styles ***********/

#sectionLinks{
margin: 0px;
padding: 0px;
border-bottom: 1px solid #cccccc;
font-size: 90%;
}

#sectionLinks h3{
padding: 10px 0px 2px 10px;
}

#sectionLinks a:link{
padding: 2px 0px 2px 10px;
border-top: 1px solid #cccccc;
width: 100%;
voice-family: "\"}\"";
voice-family:inherit;
width: auto;
}

#sectionLinks a:visited{
border-top: 1px solid #cccccc;
padding: 2px 0px 2px 10px;
}

#sectionLinks a:hover{
border-top: 1px solid #cccccc;
background-color: #dddddd;
padding: 2px 0px 2px 10px;
}

/*********** .relatedLinks styles ***********/

.relatedLinks{
margin: 0px;
padding: 0px 0px 10px 10px;
font-size: 90%;
}

.relatedLinks h3{
padding: 10px 0px 2px 0px;
}

/************** #advert styles **************/

#advert{
padding: 10px 0px 0px 10px;
font-size: 80%;
border-top: 1px solid #cccccc;
}

#advert img{
display: block;
}

/************** #headlines styles **************/

#headlines{
margin: 0px;
padding: 10px 0px 20px 10px;
font-size: 80%;
}

#headlines p{
padding: 5px 0px 5px 0px;
}