Solved

Text appearing overtop image which is set to float:left in Safari browser only

Posted on 2014-02-20
4
234 Views
Last Modified: 2014-02-20
See attached screenshot, my client is seeing <h1> content overtop of an image which is set to float:left. This appears to happen ONLY in my client's Safari browser on a MacBook Pro. I also have Safari on a MacBook Pro, I cannot duplicate this problem… in that browser, or five others (Windows and Macintosh).

I've gone over the HTML and CSS extensively… I cannot see anything wrong with it! I tried inspecting it with Developer Tools, everything looks fine. I would really appreciate if anyone could help shed some light on this. Why one particular browser?

Thank you!

HTML:

<div id="content3bg">
	<div id="content3wrap" class="clearfix">
		<ul id="menu3">
			<li>HAMS</li>
			<li><a href="http://bbdesign.com/berksfoods.com/recipes-hams.htm">Featured Recipes</a></li>
		</ul>
		<div class="content3div">
			<div class="recipeblock clearfix">
				<img src="img/ph_recipes-hams-0001.jpg" alt="Pineapple-Ginger-Lime Ham" />
				<h1>Pineapple-Ginger-Lime Ham</h1>
				<p>Lorem ipsum master walkie havenport.</p>
				<div class="recipebottom">

...

					<table>
						<tr>
							<th>PREP</th>
							<th>COOK</th>
							<th>READY IN</th>
						</tr>
						<tr>
							<td>10min</td>
							<td>30min</td>
							<td>40min</td>
						</tr>
					</table>
				</div>
			</div>

...

		</div>
	</div>
</div>

Open in new window


CSS:

div#content3bg{background:#fff url('../img/bg_content3.jpg') repeat-x top center;}
div#content3wrap{width:974px;margin:0 auto;padding:24px 0 90px 0;}
ul#menu3{float:left;margin:0;padding:0;width:208px;list-style-type:none;}
div.content3div{float:left;width:726px;min-height:382px;margin:0;padding:21px 0 9px 40px;color:#635233;background:transparent url('../img/bg_content3_divider.png') repeat-y left top;font-family:Georgia,Times,'Times New Roman',serif;}
div.recipeblock{position:relative;margin-bottom:30px;}
div.recipeblock img{float:left;margin-right:30px;}
div.recipebottom{position:absolute;left:363px;bottom:0;}
h1{margin:-5px 0 9px 0;padding:0;color:#9d0c11;font-family:Georgia,Times,'Times New Roman',serif;font-size:2em;font-weight:normal;}

Open in new window

Screen-Shot-2014-02-19-at-10.57..png
0
Comment
Question by:bbdesign
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39873727
Got a link?
0
 

Author Comment

by:bbdesign
ID: 39873735
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39873774
Change your H1 margin to have a left margin of 360px
0
 

Author Comment

by:bbdesign
ID: 39875454
That fixed it. I was concerned that it would add extra margin on all the other browsers, but that didn't happen. I still understand what was wrong with my code, but at least this is a workaround. Thanks!
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
CSS style formatting? 2 60
Flex container in CSS 8 45
CSS Odd/Even Confusion 2 40
My tooltip is not displaying correct 11 16
This article discusses four methods for overlaying images in a container on a web page
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

732 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question