...

View Full Version : IE is kicking my @$$...



borosarchangel
05-15-2011, 10:48 PM
I can't get anything to work correctly in IE. I need this logo to be nearly flush with the text (centered in between the text and the bottom of the header). It works perfectly in chrome/firefox, but for some reason there is a huge space above and below the text in IE.

As in my previous post (which there has been zero responses in over 5 hours), I have tried using conditional statements and have tried different paragraph styling and divs/classes.

#page
{
width: 900px;
margin-left: auto;
margin-right: auto;
letter-spacing: .1px;
}

#header
{
width: 900px;
height: 163px;
border: 1px solid orange;
background-color: orange;
line-height: 30px;
}

#nav
{
line-height: 50px;
width: 902px;
height: 50px;
background-color: blue;
}

#contentheader
{
text-align: center;
width: 900px;
line-height: 50px;
padding-top: 10px;
border-left: 1px solid black;
border-right: 1px solid black;
text-transform: capitalize;
}

#content
{
width: 900px;
height: 90%;
border-left: 1px solid black;
border-right: 1px solid black;
background-color: white;
padding-bottom: 25px;
float: left;
}

#onecolumn
{
display: block;
width: 86%;
float: left;
margin: 0px 0px 0px 50px;
background-color: white;
padding: 15px 7px 15px 7px;
text-align: left;
}
#leftcolumn
{
width: 43%;
float: left;
margin: 7px 0px 0% 3%;
background-color: white;
padding: 15px 7px 15px 7px;
}

#rightcolumn
{
width: 43%;
float: right;
margin: 7px 3% 0% 0px;
background-color: white;
padding: 15px 7px 15px 7px;
}

#footer
{
height: 62px;
width: 902px;
line-height: 56px;
background-color: orange;
color: black;
clear: both;
margin: auto;
}

ul
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}

li
{
margin: auto;
float: left;
}

a.nav
{
display: block;
width: 178px;
height: 48px;
font-weight: bold;
color: white;
background-color: blue;
text-align: center;
padding: 1px;
text-decoration: none;
text-transform: uppercase;
margin-top: -10px;
}

a.navend
{
display: block;
width: 179px;
height: 48px;
font-weight: bold;
color: white;
background-color: blue;
text-align: center;
padding: 1px;
text-decoration: none;
text-transform: uppercase;
margin-top: -10px;
}

a:hover,a:active
{
background-color: black;
}

img.center
{
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 5px;
}

img.botright
{
display: block;
margin-left: 813px;
margin-right: 0px;
margin-top: -72px;
width: 88px;
height: 62px;
}

p
{
font-family:"Times New Roman", Times, serif;
display: block;
margin-top: -5px;
margin-left: -1px;
}

p.floatleft
{
margin: auto;
float: left;
}

p.header
{
margin-left: auto;
margin-right: auto;
margin-top: -15px;
}

p.footer
{
text-align: center;
}

h1.center
{
display: block;
margin: auto;
text-align: center;
}

h4.center
{
margin-top: 10px;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title>Home</title>
<link rel=stylesheet type="text/css" href="css/mainCss.css" media=screen>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>

<body>

<div id="page">

<div id="header">
<h1 class="center">Internal Medicine of Dubois County</h1><img

src="http://i1098.photobucket.com/albums/g361/Forrest_Young/logo.jpg" class="center" ALT="Logo">
</div>

<div id="nav">
<ul>
<li><h4 class="center"><a href="index.html" class="nav">Home</a></h4></li>
<li><h4 class="center"><a href="info.html" class="nav">Info</a></h4></li>
<li><h4 class="center"><a href="staff.html" class="nav">Staff</a></h4></li>
<li><h4 class="center"><a href="contact.html" class="nav">Contact</a></h4></li>
<li><h4 class="center"><a href="about.html" class="navend">About</a></h4></li>
</ul>
</div>

<div id="contentheader">
<h1 class="center">Home</h1>
</div>

<div id="content">
<div id="onecolumn">
<p>Internal Medicine of Dubois County is a primary care Internal Medicine office devoted to the comprehensive

care of adult patients. This website is meant to introduce you to the staff who will be helping you maintain your health and

the policies employed in order to accomplish this.</p>
<p>What is an internist? Internal medicine is the specialty of adult medicine. As a primary caregiver, an

internist has general training in all of the subspecialties of medicine. This includes cardiology, neurology, rheumatology,

gastroenterology, allergy and immunology, diabetology, dermatology, and hematology/oncology.</p>
<p>The main job of any primary caregiver --especially internal medicine-- is omniscience (the ability to

coordinate and monitor the multiple medications and symptoms as they apply to any one specific complaint). It is common for

one treatment to have a profound effect on some other condition or medication. Primary caregivers keep an eye on all of the

multiple health problems and try to be sure that treating one problem does not interfere with the treatment of another

problem. Subspecialists take very good care of their own subspecialty, but their care is never meant to be

comprehensive.</p>
</div>
</div>

<div id="footer">
<p class="footer">Footer</p>
<img src="http://i1098.photobucket.com/albums/g361/Forrest_Young/validator.png" class="botright" ALT="Valid HTML 4.01

Strict/CSS">
</div>

</div>

</body>

</html>
The pic below shows Chrome then Firefox then IE. Also, the bottom right validator pic is skewed up a couple pixels as well (same problem from my previous post).
http://i1098.photobucket.com/albums/g361/Forrest_Young/pic.jpg
Thanks in advance, and sorry for the frequent posts.

Aurora.Light
05-15-2011, 11:07 PM
define a height.

you haven't reset your page either.




/* --RESET-- */
a, abbr, acronym, address, applet, b, big, blockquote, button, canvas, caption, center, cite, code,
body, dd, del, dfn, div, dl, dt, em, embed, fieldset, font, form, h1, h2, h3, h4, h5, h6, hr, html,
i, iframe, img, ins, kbd, label, legend, li, menu, object, ol, p, pre, q, s, samp, small, span,
strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var {
margin: 0;
padding: 0;
border: 0;
}



most ppl just reset what they need, but eh...

when I open the browser in ie9 on windows7 it looks fine
ie alternatives!

alykins
05-16-2011, 01:13 AM
i would suggest (sort of issue had on prior post dealing with your footer) defining attributes of your image, or attributes of a <div> to contain your image (height width placement)... it might also be helpful to take a couple steps back... When I look at your code i immediately start seeing all of this styling and text and "stuff"... it may be helpful to slow down... Don't try and rush and expect the page to plop out completed working fine... I like to "start slow" and build my page's elements... i concurrently style only the must haves of the boxes, and also some "construction aids"... here is an example:


#col_a{
margin: 10px;
border: whatever;
background-color: gray;(make each one unique so you can distinguish them)
etc, but only 'must haves'
}

what this does is allows me to see graphically where everything is laying out and making sure it is where is should be. Then add in "filler" or "development" text... a general standard is latin. This will also aid in seeing how the page will come together.

check it often... and go in steps... when you automatically start to have all this styling at once it can become overwhelming and interfere with itself quickly... it also makes it difficult to narrow down where your problem is exactly.

I offer anecdote: I recently posted thread called "padding"... If I hadn't done this titrated method of development I would have spent hours not knowing why my div blocks were getting screwed up... instead i was able to see that the second i applied padding incorrectly it screwed them up and was able to resolve the matter lickity-split.

I hope that helps some... best regards-

borosarchangel
05-16-2011, 03:20 AM
I understand... it is just very frustrating that the same code acts wildly different in IE. IE just needs to die.

borosarchangel
05-16-2011, 03:52 AM
well i fixed both issues. I used an inline p instead of h1 and had to explicitly set each margin (maybe IE has different default margins?). I also had to use percentages for the bottom right image.

djh101
05-16-2011, 08:56 AM
Do what I do- post a message to Internet Explorer users telling them that the page might not be displayed properly in IE that directs them to the Google Chrome download page 8).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum