July 10, 201214 yr Hi there, I am having trouble adjusting the height property in CSS for Internet Explorer, whenever I change the value of this property and go back to the page and refresh, it makes no difference. I have even made an image of the background color for the div I am trying to adjust, with a height of only 365px, but the web page does not reflect this in IE. Here is my current code: html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> <meta name="generator" content="Adobe GoLive"> <title>PJMay Design - Profile</title> <![if IE]> <link rel="stylesheet" type="text/css" href="iestyles.css"> <![endif]> <![if !IE]> <link rel="stylesheet" type="text/css" href="profileb.css"> <![endif]> </head> <body> <div id="header_bar"> </div> <ul id="nav"> <li><a href="home.html">HOME</a></li> <li><a href="profile.html">PROFILE</a></li> <li><a href="portfolio.html">PORTFOLIO</a></li> <li><a href="contact.html">CONTACT</a></li> </ul> <div id="profile"> <div id="profile_image"></div> <div id="profiledown"> <h1>PROFILE</h1> <hr> <div id="profile_text"> After leaving school I studied graphic design at the prestigious Kingsway College of Art in London. During this time I learned the basics of the profession and gained knowledge to the relevant software. Working in a busy 24 hour London studio at Kingsway College of Art in London. During this time I learned the basics of the profession and gained knowledge to the relevant software. <br><p><b>Philip May</p></b> </div> </div> </div> <div id="footer_bar"></div> </body> </html> css for IE #header_bar { margin-left: -8px; margin-top: -8px; margin-right: -8px; line-height: 40px; height:28px; background-image:url('header_bar.gif'); } #nav { margin-left: -8px; margin-top: -1px; margin-right: -8px; padding: 0 0 52px 10px; background-image:url('menu_bar.gif'); } #nav li { margin: 0; padding: 0; display: inline; list-style: none; } #nav a { float: left; line-height: 53px; margin: 0 10px 4px 17px; font-family: gill sans; font-size: 10pt; letter-spacing: 1px; text-indent: 5px; text-decoration: none; outline: none; color: #999999; } #nav a:active, #nav a:hover { padding-bottom: 2px; text-decoration: none; color: #000000; } #profile { position: absolute; top: 85px; left: 5px; background-image:url('background2.jpg'); } #profile_image { position: relative; top: 22px; left: 55px; width: 275px; height: 320px; background-image:url('sphere.jpg'); border-width: 3px; border-style: outset; clear:none; } #profiledown { position: aboslute; top: 5px; left: 355px; clear:both; } h1 { position: absolute; top: 25px; left: 355px; font-family: times, serif; font-size: 13pt; color: white; padding: 5px; text-align: center; width: 90px; background-image:url('header_bar.gif'); border-width: 3px; border-style: outset; display:inline; } hr { position: absolute; top: 65px; left: 355px; width: 410px; color: #333333; } #profile_text { position: relative; top: -250px; left: 355px; padding-top: 15px; padding-left: 20px; padding-right: 20px; padding-bottom: 10px; line-height: 24px; width: 410px; color: #333333; height: 248px; font-size: 10pt; text-align: justify; background-color: white; border-style: solid; border-width: 1px; } #footer_bar { clear: both; position: absolute; bottom: -12%; left: 0%; width: 100%; height: 28px; color: white; background-image:url('header_bar.gif'); } Any one got any idea whats happening here??
July 10, 201214 yr There are too many problems with your coding to know where to start; perhaps you should start by checking in this validator http://validator.w3.org/ and try to correct those first. Then spell absolute; not aboslute; in your iestyles.css file which changes the position of the div a lot. You have the wrong code for the IE conditional comment, it should be <!--[if IE]>....<![endif]--> but the NOT IE conditional comment code is correct. http://www.javascriptkit.com/howto/cc2.shtml However, you shouldn't need these, just use one css file without any conditional comment. If you really do need a conditional comment for IE, code the css file without a conditional comment for other browsers first, then add the IE conditional comment after it which will only hold a few styles that are different, not a complete set of styles. Try to avoid mixing position: absolute with position: relative. Try to avoid negative margins as the browser will move the element but leave a space where it would have been.
July 11, 201214 yr Author Hi Wickham, thank you for your reply. Ok, I have checked my page in the validator, and have corrected most of the errors that show up here. Yes, I spelt absolute incorrectly and when I corrected the spelling, it didnt do what I wanted anyway. I have changed the code for css link to the IE styles page. I have taken out all the negative margins for now. Do you know what I can do about the background image for the profile div? It seems I cannot control its height no matter what I do. Thanks again for your help
July 13, 201214 yr You haven't coded a height for #profile and the #profile_image inside has height: 320px; It's difficult to help you because we haven't got the images. It helps to see your page online where we can download all your files for testing, including images and css files and then you tell us exactly which div or image needs to move where. You really need to use an online tutorial like http://htmldog.com/guides/ and learn the basics.
July 13, 201214 yr Author You haven't coded a height for #profile and the #profile_image inside has height: 320px; It's difficult to help you because we haven't got the images. It helps to see your page online where we can download all your files for testing, including images and css files and then you tell us exactly which div or image needs to move where. You really need to use an online tutorial like http://htmldog.com/guides/ and learn the basics. Hello again When I have put in a height for the div #profile, it made no difference. I have now put in a height for #profile and removed the one that was in #profile_image Now IE only shows a little bit of the image, even when I use a height that is greater than the actual images height, it still only shows that little bit of the image, please view in IE to see what I mean. I really don't understand what is going on here. I have uploaded my latest editing to my online site where you can see everything (images included); My link I already know the basics of HTML/CSS, well I at least I thought I did, I just can't seem to find the solution to this. Please view this site philip may design in firefox, this is what we want it to look like in IE Many thanks Jackie Edited July 13, 201214 yr by jackie11
July 13, 201214 yr Get rid of the iestyles.css and the conditional comment for NOT IE and just have one stylesheet link:- Delete these:- <!--[if IE]> <link rel="stylesheet" type="text/css" href="iestylesforprofile.css"> <![endif]--> <![if !IE]> <link rel="stylesheet" type="text/css" href="profileb.css"> <![endif] and add in one stylesheet link so the head section looks like this:- <head> <link rel="stylesheet" type="text/css" href="profileb.css"> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <meta name="generator" content="Adobe GoLive"> <title>PJMay Design - Profile</title> </head> Then both IE and other browsers should look the same, and you can make other edits which should affect all browsers equally. IE conditional comments should only be used as a last resort and only for one or two different styles, not a complete replication. I expect your problem was because you had different styles in the two stylesheets. Your first post had iestyles.css in the IE conditional comment but your online page has a link to iestylesforprofile.css so perhaps you were editing the wrong IE stylesheet. Edited July 13, 201214 yr by Wickham
July 13, 201214 yr Author Your first post had iestyles.css in the IE conditional comment but your online page has a link to iestylesforprofile.css so perhaps you were editing the wrong IE stylesheet. No, I had to rename iestyles.css to iestylesforprofile.css, as I already had a file called iestyles.css on my site. I will reply with more of a response later. Thank you Edited July 13, 201214 yr by jackie11
Create an account or sign in to comment