Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Safari not responding to floats? (possibly?) Weird alignment.

    Hey guys, i've recently published my portfolio sight, and it seemed to be all working correctly in different browsers, until i noticed an image misaligned in Safari. The header and main content of all the pages (other than index.html) are in the same div, and i have tried to just add <br/>'s to get the alignment of the main content to line up the left sidebar. You can check it out here: www.benstewartdesign.com . It should work fine on Firefox but if you open it in Safari you will notice the main content of the div appears as though it is already 5 lines below the header, which means it not floating to the right side of the header. Here is my code of my "contact" page (which is the simplest example of the main content sitting lower than it should, again only in Safari have i noticed this) and CSS sheet:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Ben Stewart Design • Contact</title>
    <link rel="shortcut icon" href="images/favicon.png" type="image/png" />
    <link href="PortfolioCSS.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body bgcolor="#000000">
    
    <div id="feedBar">
    Follow Me!
    <br />
    <br />
    <a href="http://www.twitter.com/BStewartDesign_" target="_blank"><img src="images/twitterLogo.png" width="40" height="41" border="0" id="twitterLogo" /></a>
    <br />
    <br />
    <a href="http://www.flickr.com/photos/bestewar/" target="_blank"><img src="images/flickrLogo.png" width="60" height="17" border="0" id="flickrLogo" /></a>
    <br />
    <br />
    <a href="http://benstewartdesign.blogspot.com/" target="_blank"><img src="images/blogspotLogo.png" width="43" height="43" border="0" /></a>
    </div>
    
    <div id="leftBar">
    	<a href="about.html"><img src="images/aboutButton.png" name="aboutButton" width="91" height="24" border="0" id="button" /></a>
    	<a href="design.html"><img src="images/designButton.png" name="designButton" width="91" height="24" border="0" id="button" /></a>
        <a href="feed.html"><img src="images/feedButton.png" name="feedButton" width="91" height="24" border="0" id="button"/></a>
    	<img src="images/contactButton.png" name="contactButton" width="91" height="24" border="0" id="button"/>
        <img src="images/contactDivider.png" name="dividerLine" id="dividerLine" />
    </div>
    
    <div id="mainContain">
    
    	<div id="homeButton">
        	<a href="index.html"><img src="images/homeButton.png" width="318" height="75" border="0" /></a>
        </div>
        
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
    	   
    <div id="contactInfo">
      <p><a href="mailto:ben@benstewartdesign.com"><img src="images/mailIcon.png" border="0" id="contactIcon"/></a> <a href="mailto:ben@benstewartdesign.com">ben@benstewartdesign.com</a> </p>
      <p><img src="images/phoneIcon.png" id="contactIcon" /> 906-360-4048 </p>
      </div>
     
    </div> <!-- end mainContain-->
      
    	<div id="bottom">
        	<img src="images/BottomLeftLogo.png"  width="916" height="650" id="bottomLeftLogo" />
    	</div>
    
    </body>
    </html>
    CSS SHEET:

    Code:
    a:link {
    	color: #FF0;
    	text-decoration: none;
    }
    a:visited {
    	color: #FF0;
    }
    a:hover {
    	color: #FFF;
    }
    #mainContain {
    	width: 700px;
    	position: relative;
    	z-index: 3;
    	margin-right: auto;
    	margin-left: auto;
    	height: auto;
    }
    #homeButton {
    	float: left;
    }
    #kearnedLogo {
    	position: relative;
    	top: 103px;
    }
    #homeText  {
    	float: left;
    	margin-right: 15px;
    	margin-top: 12.5px;
    }
    #mainText {
    	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #FFF;
    	text-align: justify;
    	font-size: 12px;
    }
    #flickrWidget {
    	margin-right: 10px;
    	margin-left: -9px;
    	float: left;
    }
    #twitterWidget {
    	float: left;
    	margin-top: 22px;
    }
    #designMainPic {
    	border: 2px solid #FF0;
    	margin-top: 20px;
    	padding: 2px;
    }
    #designMain {
    	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #FFF;
    	font-size: 12px;
    	top: -20px;
    	position: relative;
    }
    #designDivider {
    	margin-top: 20px;
    	z-index: 2;
    }
    #contactIcon {
    	position: inherit;
    	padding-right: 35px;
    	clear: both;
    }
    #contactInfo {
    	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	color: #FF0;
    	text-align: left;
    	font-weight: lighter;
    }
    #leftBar {
    	z-index: 4;
    	top: 130px;
    	width: 120px;
    	clear: both;
    	position: absolute;
    	height: 220px;
    	left: 0px;
    	background-image: url(images/leftbarBG.png);
    	background-repeat: no-repeat;
    	background-position: left top;
    }
    #button {
    	padding-top: 13px;
    	padding-left: 20px;
    	padding-bottom: 12px;
    }
    #dividerLine {
    	position: absolute;
    	top: 3px;
    	width: 16px;
    	height: 197px;
    	left: 3px;
    }
    #feedBar {
    	position: absolute;
    	right: 10px;
    	top: 5px;
    	text-align: center;
    	color: #FF0;
    	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	width: 60px;
    	z-index: 3;
    }
    #bottom {
    	z-index: 0;
    }
    #bottomLeftLogo {
    	position: absolute;
    	left: 0px;
    	bottom: -60px;
    	overflow: hidden;
    	clear: both;
    	z-index: 0;
    }
    #DesignbottomLeftLogo {
    	position: absolute;
    	bottom: -1550px;
    	overflow: hidden;
    	clear: both;
    	z-index: 0;
    }

    If you guys have any idea it would be great, i've been getting a lot of compatbility problems between Safari and Firefox, mostly dealing with Safari not recognizing relative placements and floats.

  • #2
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    And now it appears that i give it 20 minutes or so after uploading it recognizes all of my spacing and alignment and looks correct.....is this something you can come to expect with web design? I'm fairly new, only have a few sites actually published, but I'm still trying to learn as much as possible.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,666
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Hello benstewartdesig,
    Using line breaks for spacing out your layout is not exactly the most dependable method. It also adds markup for no reason other than styling the layout and that job belongs to the CSS.

    Try giving your #mainText a top margin that will move it down the same distance as your #leftBar instead.

    And now it appears that i give it 20 minutes or so after uploading it recognizes all of my spacing and alignment and looks correct.....
    Just refresh the browser, that will force it to load the upadated code instead of showing you the cached version.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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