SitePoint Sponsor

User Tag List

Results 1 to 22 of 22

Thread: Ie

  1. #1
    SitePoint Evangelist superuser2's Avatar
    Join Date
    Aug 2006
    Posts
    598
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Ie

    Hello everybody,

    I have a site where I display a black gradient as a header image with some text over it. Being on a mac, it works for me with Firefox and Safari, and I was able to test it on a Windows computer, and found that it displays horribly in IE6 and IE7. Would somebody please tell me how to get a 78 pixel repeating gradient image to reach to all of the top corners of the window, so it displays like in the attached screenshot?

    I know I am not allowed to give you the URL of the site, but if it would help you, PM me and I'll give it to you.

    Thanks!

    P.S. I am waiting on BrowserShots for a screenshot in IE, I'll attach it when it comes.

  2. #2
    Word Painter silver trophy Shyflower's Avatar
    Join Date
    Oct 2003
    Location
    Winona, MN USA
    Posts
    10,053
    Mentioned
    142 Post(s)
    Tagged
    2 Thread(s)
    You are allowed to post the url of your site(s) in your signature.
    Linda Jenkinson
    "Say what you mean. Mean what you say. But don't say it mean." ~Unknown

  3. #3
    SitePoint Evangelist superuser2's Avatar
    Join Date
    Aug 2006
    Posts
    598
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, its not really ready for the big-time, so I won't do that yet. But I'll just put the URL in this post, because it is not really self-promotion, I need help with it, I'm not trying to sell it you.

    http://sudo2.com/jobtracker/

    thanks
    to the moderators: I'm sorry if I'm not allowed to post that, please just remove it.

  4. #4
    Word Painter silver trophy Shyflower's Avatar
    Join Date
    Oct 2003
    Location
    Winona, MN USA
    Posts
    10,053
    Mentioned
    142 Post(s)
    Tagged
    2 Thread(s)
    The good news (I think): In this forum you are allowed to post the url if you need help with an element.

    First of all, I don't know why you are using and image instead of a background color since it is just black, unless my screen is missing a gradient?

    I used a background image on this page http://shyflower.com/test/lorem%20ipsum.htm and it displayed well on my windows machine in both Firefox and IE 6.

    here's the css:

    Code:
    <style type="text/css">
    #one{
    background-image:
    url( ../images/bgslice.jpg);
    position:top;
    background-repeat: repeat-x;
    height: 100px;}
    </style>
    The html is a simple
    Code:
    <div id="one"> Some text here</div>
    Linda Jenkinson
    "Say what you mean. Mean what you say. But don't say it mean." ~Unknown

  5. #5
    SitePoint Evangelist superuser2's Avatar
    Join Date
    Aug 2006
    Posts
    598
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes it is a gradient, just dark.

    I have added position: top; to my CSS. It took me an hour to get a browsershots IE7 screenshot, so would you please just try the URL and tell me how it looks in IE6?

    Thanks!

  6. #6
    Word Painter silver trophy Shyflower's Avatar
    Join Date
    Oct 2003
    Location
    Winona, MN USA
    Posts
    10,053
    Mentioned
    142 Post(s)
    Tagged
    2 Thread(s)
    It isn't working. Did you try the code I posted?
    Linda Jenkinson
    "Say what you mean. Mean what you say. But don't say it mean." ~Unknown

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,283
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Yes its broken in ie i'm afraid. You are going about this the wrong way.

    First of all you must know that all elements have default margins and padding that differ bewteen browsers and you must control these. The gaps at the top of pages are created by default padding and margins on html and body elements. You should set these to zero and not try and use negative margins to compensate.

    The simple code to do this is as follows:


    Code:
    html,body {margin:0;padding:0}
    h1#header {
    	background: url(http://sudo2.com/top.png) repeat-x left top; 
    	height: 78px;
    	line-height:78px;
    	font-family:'Trebuchet MS','Lucida Grande', Arial, sans-serif;
    	text-indent:20px;
    	font-size: 28pt;
    	color: #FFF;
    	overflow:hidden;
    	margin:0 0 1em 0;
    	font-weight:normal;
    }
    Then all the html you need for this is here:
    Code:
    <h1 id='header'>Job Tracker</h1>
    Remember that you must also control padding and margins on your header tags and p tags and everything else. See the CSS faq tips section.

    Of course I would prefer it if you used a relative font size and didn't give the header a specific height so that the text could be enlarged but this would require producing a larger gradient background image so more could be revealed as the header expanded.

    However the above should get you started.

    BTW there is no such thing as position:top

    Hope it helps

  8. #8
    Word Painter silver trophy Shyflower's Avatar
    Join Date
    Oct 2003
    Location
    Winona, MN USA
    Posts
    10,053
    Mentioned
    142 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Paul O'B

    BTW there is no such thing as [b]position:top

    Oh my bad! I knew that.

    Sorry superuser2!
    Linda Jenkinson
    "Say what you mean. Mean what you say. But don't say it mean." ~Unknown

  9. #9
    SitePoint Evangelist superuser2's Avatar
    Join Date
    Aug 2006
    Posts
    598
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul O'B,

    I have tried your solution, and it still works in firefox. However, now the main content is too far down from the header image. Is there some IE-and-Firefox-friendly way to move it up?

    Other than that, would you please try my site again and tell me if the header works?

    --superuser2

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,283
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Just checked in ie and firefox and they are virtually identical.

    You need to control the default margins on the elements you are using as you have done nothing. The h1 has a 1em bottom margin (from my code) so reduce it if you want content closer.

    Then also adjust the top margin of the h2 that follows it as required. the control the margins on the p tags as required and so on.........

    You must control the top and bottom margins of all the elements you use as the browers will appply defaults that vary from browsers to browser. See the faq tip section for a global reset that will set all elements to zero (* margin:0;padding:0)

    Hope that helps

  11. #11
    SitePoint Evangelist superuser2's Avatar
    Join Date
    Aug 2006
    Posts
    598
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! I think I have this all solved now. I'm waiting on another IE7 screenshot from BrowserShots.org, but now I think I have this working. I really appreciate your help!

  12. #12
    SitePoint Evangelist superuser2's Avatar
    Join Date
    Aug 2006
    Posts
    598
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I changed 1em to 0 and it worked. Thank you!

  13. #13
    SitePoint Evangelist superuser2's Avatar
    Join Date
    Aug 2006
    Posts
    598
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Would you please tell me how it looks now?

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,283
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    There are still differences between ie and firefox because you still have not accounted for the default margins on the elements you are using.

    For example your login box is lower down in firefox because firefox applies a 1em top margin to the p tag but IE doesn't. You must explicitly set the top and bottom margins of the elements you use or be prepared for them to be different in every browser. Firefox usually add a default top margin of 1 em to elements like headings and p tags and ul etc but ie only applies a bottome margin . (That includes elements like forms that get a big margin in ie but not in other browsers.)

    See the faq tips section in the css FAQ as this is explained in detail there

    Otherwise the layout looks much the same

    Also validate your page as you have 29 errors according to the validator and any one could blow your layout up

    One last thing - don't use breaks just to make space because thats what margins and padding are for. A break is ony used whn you want a line break such as in an address or poem. Generally you would close the p tag (or whatever tag it is) and set the margins accordingly. Do ot use break just to make space as its a waste of html and it means you lose control over the page from the stylesheet.

    Hope that helps

  15. #15
    SitePoint Evangelist superuser2's Avatar
    Join Date
    Aug 2006
    Posts
    598
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I really can't do this blind. Could you please attach a screenshot? BrowserShots doesn't seem to have IE screenshots anymore.
    OK, I'll read the FAQ, but I just don't know exactly what's wrong, I need to see what it looks like in IE.

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,283
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    Well I gave the answer in my previous post and you need to set the default top margin of the p tag (and other elements) to zero and the firefox will look the same as IE. Or set the top margin to 1em and then ie will be like firefox

    If you are consistent and address these margin issues then chances are that the page will do as you told it.

    Anyway here are some screenshots from browerscam.

    http://www.browsercam.com/public.aspx?proj_id=301124

    (They may niot be ready for a little while so check back later)

  17. #17
    SitePoint Evangelist superuser2's Avatar
    Join Date
    Aug 2006
    Posts
    598
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, I set my margins on my elements.

    BrowserCam doesn't seem to work, in all of the IE screenshots, it took the screenshot before the page loaded.

    I'll see if I can use my friend's Windows computer, but I have done what you asked so hopefully it will work!

    Thanks for your help.

  18. #18
    SitePoint Evangelist superuser2's Avatar
    Join Date
    Aug 2006
    Posts
    598
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul O'B
    Thanks again, it works in IE6 and IE7. However, in IE5 there is a minor glitch:

    http://browsershots.org/screenshots/...901b4f7f14aff/

    The gradient does not reach all the way to the left. Is there any way this could be corrected?

    Thanks again, I really needed to get this working and now it does. And as for the IE5 glitch, hopefully nobody is using that anymore, but I'd like to correct it just in case.

    Thanks!
    --superuser2

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,283
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    My standalone ie5 has l crashed and refuses to work so I can't check and debug this. At a guess I would possibly say its something like the text-indent that may be causing a problem as ie5 does have problems with it.

    Try using padding ionstead of text-indent in the header/

    Code:
    h1#header {
    	background: url(http://sudo2.com/top.png) repeat-x left top; 
    	height: 78px;
    	line-height:78px;
    	font-family:'Trebuchet MS','Lucida Grande', Arial, sans-serif;
    	padding-left:20px;
    	font-size: 28pt;
    	color: #FFF;
    	overflow:hidden;
    	margin:0 0 0 0;
    	font-weight:normal;
    }
    If that's not the problem then its probably not worth adding hacks just for ie5 as will probably end up breaking something else.

  20. #20
    SitePoint Evangelist superuser2's Avatar
    Join Date
    Aug 2006
    Posts
    598
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK I changed that and it still works in Firefox and Safari. I'm waiting on browsershots again, but maybe you could tell me if it still works in IE6?

  21. #21
    SitePoint Evangelist superuser2's Avatar
    Join Date
    Aug 2006
    Posts
    598
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul O'B,

    YES! It works! My site is now compatible across the board:

    http://browsershots.org/website/http...om/jobtracker/

    Thanks for all your help, I really appreciate your patience and advice. I'm glad there are experts like you around and willing to help, as I never would have figured this out on my own.

    --Problem Solved --

    Happy Coding!
    --superuser2

  22. #22
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,283
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You're welcome


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •