• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 427
  • Last Modified:

Safari and Chrome Rendering Problem

I have a div that renders fine in the other browsers.  However, in Safari or Chrome the text decoration isn't near the item it is spread to the far left instead.

<div class="navbox2col_longer_index">
  <div class="links_navbox_left_longer_index">
    <ul class="leftnav3_navbox_left">
      <li class="leftnav3_navbox_left"><img src="/Resources/nsp_logo.gif" class="centered" /></li>
      </ul>
 </div>
      
<div class="links_navbox_right_longer_index">
<ul class="leftnav3_navbox_right_index">

<li class="leftnav3_navbox_right_index">Wholesale Prices Always</li>
<li class="leftnav3_navbox_right_index">Fast Shipping! <br />
                Leaves 1 of 4 warehouses within 24 hours M-F</li>
<li class="leftnav3_navbox_right_index">Quality - Nature's Sunshine</li>
<li class="leftnav3_navbox_right_index">Fresh - No Old Inventory <br />
                We ship from the manufacturer</li>
      
    </ul>
  </div> 
</div>

Open in new window


you can see it at http://www.theherbsplace.com/test_browser.html

div.navbox2col_longer_index {
	margin: 0px;
	padding:0px; /* This pads the links in the rightmenu */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #0000FF;
	font-weight: bold;
	text-align:left;
	overflow: hidden;
	background-color:#FFFFff;
	position: relative;
	margin:0 auto;
	width:550px;
	padding-top:6px;
	padding-bottom:6px;
	margin-top:6px;
}
.links_navbox_left_longer_index {
margin:0px;
padding:0px;
float:left;
width:180px;
padding-right:10px;
}

ul.leftnav3_navbox_left {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	margin:0 auto;
	text-align:center;
}
li.leftnav3_navbox_left {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	text-align:center;
	margin:0 auto;
}
.centered {
margin:0 auto;
text-align:center;
}
.links_navbox_right_longer_index {
margin:0px;
padding:0px;
float:right;
width:350px;
}
li.leftnav3_navbox_right_index {
	padding: 0px;
	margin:0;
	margin:0 auto;
	text-align:center;
	padding-top:1px;
	color:#336633;
	background-color:#FFF;
	margin-bottom:11px;
	}
ul.leftnav3_navbox_right_index {
	margin: 0px;
	padding: 0px;
	margin:0 auto;
	text-align:center;
	margin-top:11px;
}

Open in new window

0
sharingsunshine
Asked:
sharingsunshine
  • 4
1 Solution
 
jmnfCommented:
my Google Chrome (10.0.648) rendered it exactly as Firefox did (4)
0
 
sharingsunshineAuthor Commented:
I am using vmware and I have the same version of chrome as you have.  What about Safari that is my biggest issue?
0
 
sharingsunshineAuthor Commented:
I have since checked Google Chrome same version on a native PC and it is showing the same problem.  so there must be something in the preferences making the difference.  Anyone have any ideas?

I need this to show properly in Chrome and Safari.

Thanks,

Randal
0
 
sharingsunshineAuthor Commented:
When I took out the margin:0 auto; and the text-align:center commands the problem went away.  This is only a problem if you are showing the text decorations.

Randal
0
 
sharingsunshineAuthor Commented:
no one provided a solution so I figured it out myself.
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now