www.webdeveloper.com
Results 1 to 3 of 3

Thread: Floating Bug In Browsers

  1. #1
    Join Date
    May 2012
    Posts
    82

    Floating Bug In Browsers

    I have an aside called #call_now which i have floated right with another area to left. The problem is #call_now was going to the bottom of the page so i applied css positioning to move #call_now to the top of the page. I was able to get #call_now to the top of the page however margin is different in each browser in other words in IE #call_now is further to the top than in Firefox or Chrome. Is there away to get this to work in all browsers without have to have separate style sheets for the various browsers?

    CSS:
    Code:
    #call_now {
      float: right;
      margin-right: 25px;
      width: 209px;
      position: relative;
      height: 384px;
      margin-top: -715px;
      background: #fff;
    }
    html:
    Code:
     
        <aside id="call_now">
        		<p class="callnow">Call Now!</p>
        		<p class="number">1-888-518-0690</p>
        		<p class="center_txt">or</p>
        		<p class="blue">let us call you</p>
        		<p class="callnow_txt">
        		Simply fill out the form<br>
        		below and one of our<br>
        		experts will cal you</p>
        		<img src="img/call_now.png" alt="Call Now! Or Let Us Call You">
        		
          		<form id="content_form">
          			<p>
        	  			<label class="block">
        	  				<input type="text" id="firstName" class="normal" type="firstName" autocomplete="on" value="first name">
        	  			</label>
        	  			<label class="block">
        	  				<input type="text" id="lastName" class="normal" type="lastName" autocomplete="on" value="last name">
        	  			</label>
        	  			<label class="block">
          				  	<input type="text" id="phone" class="normal" type="phone" autocomplete="on" value="phone">
        	  			</label>
        	  			<label class="block">
        		  			<input type="text" id="zip" class="normal" type="zip" autocomplete="on" value="zip code">
        	  			</label> 
        	  			<button type="submit" id="submit" class="normal" value="submit" title="submit">submit</button>
          			</p>
        	  	</form><!-- end content_form -->
        	</aside> <!-- end call_now -->

  2. #2
    Join Date
    Aug 2012
    Posts
    155
    Get rid of the negative top margin (bad coding) and remove the position: relative. Then put a 1px border on your #call_now div and also on the div you have floating on the left - you will probably find that they overlap and that is why you #call_now div is being pushed to the bottom of the page. If that is the case, remove the borders and reset the widths of both floated elements so that they can fit alongside each other.

  3. #3
    Join Date
    May 2012
    Posts
    82

    Thumbs up

    Thank you that fixed the issue.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles