July 5, 201313 yr This page, the H1 header is cut off when viewed in IE7, how do I fix ? Is there any way to get hinted at what the problem could be when dealing with browser issue, firebug won't necessarily point out the problem, may there is something I'm unaware of.
July 5, 201313 yr firebug won't necessarily point out the problem Firebug wouldn't, since your problem isn't an error and Firebug scans for errors. This is just different browsers reacting to your CSS settings differently. Looking at your CSS, it's a bit of a mess if I'm honest, with padding all over the place and margins and whatnot. I can only assume that all of the pushing and shoving between the margins and padding is causing the positioning of the elements to push the h1 header up further in IE. Additionally, the CSS for h1 is affecting all your h1 classes, as you probably know, but since the top h1 (in red) is bigger then it'd react to padding/margins differently. I've sorted it out a bit so try the code I've pasted below. I don't have IE7 installed, but I'm relatively certain this CSS won't cause the h1 header to appear above the browser window. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="description" content=""> <meta name="keywords" content=""> <title></title> <style type="text/css"> body {margin:0;background-color:orange;} #main {width: 700px;margin:0px;background:white;background-image:url('images/bgtile.jpg'); } #main .header h1 {font-size:3.6em; padding-left:12px;color:blue;} .header {background-color:transparent; position:relative; top:0px;padding-left:0px;margin-left:0px;margin-bottom:22px;display:block;top: 0px;} #main p {padding-left: 52px;margin-top:0px;padding-bottom:16px;margin-bottom:0px;} #main .b1, .b2, .b3, .b4 {padding-left:1px;margin: 0px 0px 0 40px;padding-bottom:0px;font-size:1.7em;color:red;width:350px;} #main .b1 p {} .header h1{margin:0;} #topheader{} </style> <!--[if IE]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div id="main"> <div class="header"> <h1>Softimage Keyboard Cuts</h1> </div> <h1 class="b1">KeyShort A</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesen.</p> <h1 class="b2">KeyShort B</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesen.</p> <h1 class="b3">KeyShort C</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesen.</p> <h1 class="b4">KeyShort D</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesen.</p> </div> </body> </html>
July 5, 201313 yr Author Can you tell me specifically where the error lies, I began applying some of the styles, after analzying them, to the page and things started shifting around for the negative, for example, margins added to where I don't want etc.
July 5, 201313 yr Can you tell me specifically where the error lies, I began applying some of the styles, after analzying them, to the page and things started shifting around for the negative, for example, margins added to where I don't want etc. Well no, I can't, like I described in my first post, the padding and margins were a mess, it could have been caused by any number of factors.
July 5, 201313 yr Author .header {background-color:transparent; position:relative; top:0px; width:275px;paddingbottom:25px;margin-left:12px;height:90px;display:inline;top: -15px;} Things shifted a little, overall it worked, I can tweak a little, if need be. Remove the display:inline, look what happens. Edited July 5, 201313 yr by CreativeSheep
July 5, 201313 yr remove display inline use and then you dont need minus margins & positions <h1>Softimage Keyboard Cuts</h1>
July 5, 201313 yr Author I don't want to use a tag. IE 9 & 10 are nearly identical. IE 7 and sometimes 8 stuff always shifts slightly, never the same as in IE 9 / 10.
July 5, 201313 yr Author I applied the white-space:no-wrap. I think that is the closest I will get it comparing IE7 with IE 9 / 10. Edited July 5, 201313 yr by CreativeSheep
July 5, 201313 yr body {margin:0;background-color:black;} #main {background:url('bgtile.jpg'); width:720px;margin:0px; } #main .header h1 {font-size:3.6em; padding-left:12px;color:blue;} .header {background-color:transparent;width:275px;paddingbottom:25px;margin-left:12px;height:90px;padding-top:7px;white-space:nowrap;} #main p {padding-left: 52px;margin-top:0px;padding-bottom:24px;margin-bottom:12px;} #main .b1, .b2, .b3, .b4 {padding-left:1px;margin: 0 6px 0 40px;font-size:1.7em;color:red;width:350px;} /*.ie7 {padding-top:25px; }*/ #main .b1 p {padding-top:32px;} .header h1 {padding-top: 12px;font-size:.5em;margin:0px;} Only difference IE7 adds scroll bar
July 5, 201313 yr Author body {margin:0;background-color:black;} #main {background:url('bgtile.jpg'); width:720px;margin:0px; } #main .header h1 {font-size:3.6em; padding-left:12px;color:blue;} .header {background-color:transparent;width:275px;paddingbottom:25px;margin-left:12px;height:90px;padding-top:7px;white-space:nowrap;} #main p {padding-left: 52px;margin-top:0px;padding-bottom:24px;margin-bottom:12px;} #main .b1, .b2, .b3, .b4 {padding-left:1px;margin: 0 6px 0 40px;font-size:1.7em;color:red;width:350px;} /*.ie7 {padding-top:25px; }*/ #main .b1 p {padding-top:32px;} .header h1 {padding-top: 12px;font-size:.5em;margin:0px;} Only difference IE7 adds scroll bar What is adding a scroll bar ?
July 5, 201313 yr The scroll bar on the right of this page, IE7 always adds this whether needed or not you can force it on other browser by adding html { overflow-y: scroll; } hth
July 5, 201313 yr Author huh ? How do I make the browser window the exact size of the container div ? Edited July 5, 201313 yr by CreativeSheep
July 5, 201313 yr Did you try my code, Sheep? Sorry, not sure if you did or not. Edited July 5, 201313 yr by throzen
July 5, 201313 yr I tried your code Throzen works perfectly I was just trying to help sheep with his original css
July 5, 201313 yr Author I tried your code Throzen works perfectly I was just trying to help sheep with his original css You appear as though you are subordinate to throzen. Is there something I don't know ?
July 5, 201313 yr I tried your code Throzen works perfectly I was just trying to help sheep with his original css Don't worry mteam, I was just wondering why Sheep was still looking for an answer when I gave him a fixable code. You appear as though you are subordinate to throzen. Is there something I don't know ? Only in the bedroom.
July 6, 201313 yr Author Don't worry mteam, I was just wondering why Sheep was still looking for an answer when I gave him a fixable code. Only in the bedroom. I knew it. Throzen - Don't take me the wrong way, I wanted to see if I could pin point the problem I still may do a minor adjustment to the code, by removing the condition that I put into place for IE7. Edit: I must have fixed it, it's complete Edited July 6, 201313 yr by CreativeSheep
Create an account or sign in to comment