SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member ComputerLady's Avatar
    Join Date
    Nov 2004
    Location
    Sandusky Ohio
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Sliced image positioning issues

    I'm back again! While I appreciate all the suggestions for fixing my sliced image display problem, I thought it would be better to do this all in CSS using positioning. Less code involved, and (I thought) less cross-browser issues. Guess I'm wrong on that point!

    At any rate, here is how the header looks totally redone in CSS:

    http://www.krausauctions.com/site-tempate.html

    Looks perfect in Mozilla's FireFox, but in IE the 2 absolutely positioned graphics at either end don't want to line up right. I'd hate to do a tweak just for IE, so before I keep bashing my brains out on this I thought I'd ask for some input. Code for new CSS is:

    Code:
    #HeadingBackground {
    	background-image: url(ka_headings/KrausAuctionHeadingBckg.jpg);
    	background-repeat: repeat-x;
    	margin-left: 15px;
    	margin-right: 15px;
    	height: 153px;
    	width: 95%;
    }
    
    .first {
    	margin: 0px;
    }
    
    #HeadingLogo {
    	position: absolute;
    	left: 75px; top: 40px;
    	width:447px;
    	height:153px;
    }
    
    #HeadingEndCap {
    	position: absolute;
    	right: 75px; top:40px;
    	width: 44px; height: 153px;
    }
    
    #HeadingLinks {
    	position: absolute;
    	right: 120px; top: 62px;
    	width: 25%;
    	vertical-align: middle;
    }
    
    #HeadingMenu {
    	position: absolute;
    	top: 150px; left: 85px;
    	height: 30px;
    	width: 80%;
    }
    The .first paragraph is already one 'fudge' factor, and is used to make the heading background appear.

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

    The problem is that youare setting a margin-top which is taken from the top of the browser, plus whatever margins/paddings have been set for default by the browser. Therefore your absolutely placed elements which ignore the padding on the body will be in different positions in different browsers unless you specifically set the defaults to a consistent value.

    The second reason your layout is out is because you have used the keyword thick for the border and the wifth of thick is again not specific enough to account for absolute positioning. You need to set the width in pixels so that all browsers are the same.

    You probably also need to set the height:1% hack for #content as it does not have any dimensions defines and may cause problems also.

    Code:
    html,body{ margin:0;padding:0}
    #content {
     background-color: White;
     border: ridge;
     border-width: 5px;
     border-color: #663333;
     margin-top: 35px;
     margin-bottom: 35px;
     margin-right: 60px;
     margin-left: 60px;
     text-align: center;
    }
    /* commented backslash hack v2 \*/ 
    * html #content {height:1%}
    /* end hack */
    You don't need the <p>&nbsp;</p> in the heading so take it out.

    You would have been better off wrapping the header background element all around the rest of the heading content so that you kwow that its all wrapped up.

    Your positioning system would also have been better if you use your #content element as the basis of the positioning system (add position:relative to #content) but that would mean that you'd have to change all the co-ordinates to match now.

    Try not to use align=center in the html and use margin-left:auto and margin-right:auto in the css for that element. (You will of course need the ie5,5.5. hack of text-align:center on a parent element also).
    Hope that helps.

    Paul

  3. #3
    SitePoint Member ComputerLady's Avatar
    Join Date
    Nov 2004
    Location
    Sandusky Ohio
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Update!

    I tried the relative positioning inside the #content box, and that seem to look even worse. From everything I understand about CSS, that does seem the best idea. It just looked lousy in execution!

    Today, I realized I should just take that whole header section out of the #content box and see how that looked on its own. Certainly was far easier to get everything to line up the way it should that way! Only flaw is that IE does want to stick an extra 10pix margins or so at the top of the #content box. If I've got to live with that, I will. Looks very close to what I was shooting for, at any rate! Appreciate the feedback, as you did point out some mistakes I'd made.

    Not sure what you're referring to in those 2 hacks you mentioned. The height:1% hack for #content and ie5,5.5. hack of text-align:center. Have to poke around in the FAQ's here to see if that's mentioned someplace.

  4. #4
    SitePoint Member ComputerLady's Avatar
    Join Date
    Nov 2004
    Location
    Sandusky Ohio
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Found box hack in FAQ

    Found the IE 5.5 box hack and the backslash one you're referring to in the FAQ. Does this mean I should put a surrounding container around my #content box, so I can separate some of these definintions into 2 areas? At least, that what I'm gathering the point is on this...

    I swear I've seen some sites load different CSS files based on type of browser detected. Figured that had to be done with an XML based code or something.

    Hanging this one up for a while, as I've got to go figure out if there's any way to insert a Flash file into an XHTML page and still get it to validate. Not sure if there's a way to DO that!

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

    The code I gave you would have fixed things as they stood

    Only flaw is that IE does want to stick an extra 10pix margins or so at the top of the #content box.
    There is no reason why ie and mozilla will not match up (in most cases). As mentioned above you have to control the default margins and padding on all elements. Its no good just coding somethin like <h1>hello</h1 and thinking it will be the same between browsers. Mozilla and ie will both apply different amount of margins and padding to the h1 so you have to set them to what you want. e.g. h1 (margin:0 0 1em 0;padding:0}.

    Now all browsers will be equal and any positioning you place on the element will match exactly between browsers.

    The height:1% hack is often needed on elements that have their widths defined by margins alone. IE doesn't give these elements "layout" unless a dimension is specified. What happens is that ie can't work out the width correctly and all manner of bugs will appear inside the element. Height:1% fixes this.

    You don't want to get into browsers detection and different css for different browsers as theres really no need. Itrs far easier to keep it all in one place and most times its bad coding that makes people use hacks to compensate for things they've done wrong (such as not setting padding and margins correctly).

    Ie5.5. and ie6 are quite easy to get right (ie 5 is a little harder but not impossible). Firefox and ie can usually be made to look the same without too much effort.

    as I've got to go figure out if there's any way to insert a Flash file into an XHTML page and still get it to validate.
    Some info here that may be of use.

    http://www.alistapart.com/articles/flashsatay/
    http://www.stilldreamer.com/programm...thod_improved/

    Paul


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
  •