Floating left and right in Safari

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • intuna
    New Member
    • Aug 2006
    • 2
    #1

    Floating left and right in Safari

    I've seen a screen shot of my header graphic in Safari. (don't have Safari)

    I'm coding using Firefox and IE.
    In those browsers the behavior is consistent.

    I have two floated graphics, one float:left inside div#headerLeft and one float:right, inside div#headerRight .
    They're inside a div#header that has a background graphic.
    These are all inside an absolutely positioned div#top.

    In the browsers I've used the graphic/header takes all of the width of the body, which is what I want, with the float:left graphic all of the way left and the float:right graphic all of the way right, taking up 100% of the space.

    In Safari, if someone could please confirm, the right graphic appears as though it's inline and right up against the left graphic and all to the left, which also sizes the background graphic in div#header to just cover only this smaller size.

    Is there a better convention for floating graphics in Safari?
    Do I need to add a display: command? ( I tried width:100% but that apparently didn't work.)

    Most all of the pages have the same header system with the main exception being the index.html which has a few slightly larger graphics.

    The beta site is at <a href='http://members.cox.net/david.silva">ht tp://members.cox.net/david.silva<a>
    The .css file used is products.css also on this site.

    If you can lend some Safari insight, it would be most appreciated :)
    Tags: None
    • intuna
      New Member
      • Aug 2006
      • 2
      #2
      I'll try to figure out how to just post this code.
      It must be too difficult a question, or no uses Safari here, or it's an obvious question, (or I'm just not patient enough ;) )

      Here's the .html

      [HTML]
      <body>
      <div id="top">
      <div id="header">
      <div id="headerleft" >
      <img src="images/jdslogo-300dpi-350w-wh.gif" width="350" height="58" alt="/**/" />
      </div>
      <div id="headerright ">
      <img src="images/header-creation-175h.gif" width="231" height="175" alt="/**/" />
      </div>
      </div>
      </div>

      <Lot's of other content>
      </body>
      [/HTML]

      And here's the pertinent .css including the body tag, in case Safari is reacting to something in that:

      Code:
      body {
	margin: 0px; /* Must leave in - fixes body overflow in IE */
	padding: 0px; /* Must leave in - fixes body overflow in IE */
	background-color: #FCFCFC;
	background-image: url(images/ground_blue.gif);
	background-attachment: fixed;
	font-family: "Century Gothic", Helvetica, Tahoma, Arial, sans-serif;
	font-size: small;
	color: #00015E;
	voice-family: inherit;
}
#top {
	position: absolute;
	top: 0px;
	left: 0px;
	display: block; /*just added for Safari - didn't work */
	width: 100%; /*just added for Safari - didn't work */
}
#header {
	background-image: url(images/header-bk-mag-narrow.gif);
	background-repeat: repeat-x;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	height: 75px;
}
#headerleft {
	position: relative;
	float: left;
	top: 8px;
	left: 10px;
	height: 66px;
}
#headerright {
	position: relative;
	float: right;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
}

        Comment

        Previous template Next
        Working...