CSS - Why I Cant See My Site In Chrome&safari???

Hi All,

I am new to this forum and to CSS and Web Development as a whole. I am a notch up from "total n00b".

I can't post links so the website is www (dot) authenticimpressions (dot) com

I built this site for my wife using Wordpress, some plugins, and some themes I bought. The Galleries all look great in Chrome and Firefox on PC, and in Firefox and Safari on Mac. But in IE7 on PC, I get a 4 or 5px white border on the bottom and the left in each of the galleries. I've played and played with the stylesheets and cannot figure this one out.

What other information should I post or provide to get some help?

Thanks in advance, I really appreciate it.

Hi All

I have been contacted by a visitor to one of my sites to let me know that the fonts on a menu are too large but only on Chrome and Safari.

I'm struggling to figure out why the web-kit browsers are enlarging the fonts so much any help that I can get from you guys would be gratefully received.

Font size is fine FF3.5 and IE8

Site is http://www.pwfs.co.uk and its the horizontal navigation menu that the issue occurs.

Hoping someone can help

John

Hello all, I am having trouble getting my site menu to display properly in chrome and safari. In chrome and safari the menu link are raised higher up in comparison to firefox and IE.

Here is my site: Well I guess I can not link my site, but hopefully someone can still help me.


Here is my code: Quote:
/* Tabs ==================== */

#homepagetabs {
border-bottom: none;
margin-bottom: 10px;
padding-left:170px;
height:51px;
background:transparent url
}

#homepagetabs li {
display: inline;
list-style-type: none;
margin-top: 14px;
border: none;
border-bottom: none;
float: center;
line-height: 14px;
margin-right: 8px;
text-decoration: none;
cursor: pointer;
color:#fff;
background: none;
font-weight:bold;
font-size:12px;
}

#homepagetabs li.currenttab {
margin-top: 14px;
background: none;
border: none;
border-bottom: none;
font-weight:bold;
color:#fff;
font-size:12px;
text-decoration:underline;
}

#options_69 th {
font-size: 100%;
}

I have an issue with an image that just doesn't show up in IE6-8 no matter what I do. I even tried just putting in the url for the image and it still wouldn't show it. I took it into Photoshop to make sure it was properly saved as a jpeg and it is.

The file validates (with some minor color warnings).

I tried to post the url by putting url tags but that didnt work so here it is obscured mandp dot lamster dot org/contacts dot shtml

and the photo alone is at mandp dot lamster dot org / images / MP65APhoto dot jpg

Another issue with the url for the page is that I can't seem to get the width of the right pane smaller.

Any help would be appreciated.

Thanks/Hal

Hi,

If you check this site out with Google Chrome or Safari, you'll see (just below the header) the mid-section is offset to the right.

http://www.ergopro.com/

I noticed if I remove the "Icons" div everything is okay, but I need it there. I tried adjusting it, but no dice. Any ideers?

Much thanks in advance.

I am working on a development site (http://dev.asbco.com/products/commercialindustrial/ ) and I am getting different looks in Safari and Chrome.

IE8/FireFox 3/Opera all render the page correctly, Safari and Chrome are off.

Any ideas how to fix this issue?

Thanks!

[EDIT]
I meant Safari and Chrome not Safari and FireFox 3.

Hello all,

I have bumped into some strange problems. Chrome seems to be viewing my fonts alot thinner/smaller than Safari and Firefox. Is there a method to create consistency and ignoring the webbrowsers standards? Its creating a mess, specially with my text which is using text-shadow. The blur looks like disaster.

Thanks in advance.

This could have been posted in the DHTML forum, but I'm guessing the problem is with my CSS bits rather than the DHTML as such so I'm posting here.

I've created a 'working' overlay for a page which has quite a bit of AJAX interaction. The connection the page will be used on is quite slow so I pop up a full screen table with 50% transparency to dim the main page, and the table has a box in the middle informing the user that the page is doing some work in the background.

This works great in IE and FF, but in Chrome and Safari the overlay seems to be preventing any interaction with the pages WHEN IT IS HIDDEN.

This is the correct/desired behaviour when the overlay is displayed - ie when the comms with the backed are happening I don't want the user to be able to push any other buttons or edit any other form elements - but when the layer is hidden (CSS = visibilty: hidden; display: none the layer still seems to prevent the user from clicking any of the controls (buttons, text fields, links etc).

The reason I think it is the overlay layer doing this is that if I double click anywhere on the page, the area that 'working...' overlay displays in when it IS displayed becomes selected/highlighted.

Is this a webkit oddity or am I doing something wrong?

(To display the overlay I just switch the CSS of that particular DIV to "visibility: visible; display; block", but I have also tried "display: inherit;" and "display: inline;").

Thanks,

FM

Hello,

I was wondering if anyone could shed some light on this problem I'm having with my navigation bar. I've Googled and tried every [seemingly] logical combination, but can't get it to work -- and it's driving me nuts!

Basically, I have a div containing an unordered list and an image. The image is a non-semantic hack I've had to put in for the design, without making it massively complicated... Anyway, the problem is with the ul, which contains lis that are just images (tabs). Like so:

Code:

<div id="tabs">
  <ul>
    <li><a href="..."><img src="..."></a></li>
    <li><a href="..."><img src="..."></a></li>
    [etc.]
  </ul>
  <img src="filler.png">
</div>

Each image is a different width; and the above is simplified for clarity... Anyway, this works perfectly in Firefox, Opera and even IE. However, in Safari and Chrome, the lis have a few extra, blank pixels of padding on the right edge of the image; whereas I want all the images to butt-up against each other.

My CSS is as follows:

Code:

#tabs {
  word-spacing: -4px; 
}

#tabs ul {
  display: inline; list-style: none;
  margin: 0px; padding: 0px;
}

#tabs li {
  display: inline;
}

The word-spacing for the div removes the spacing you automatically get in Firefox/Opera/IE -- I found -4px was enough to remove the gap entirely -- but in Safari/Chrome, a gap remains. If you make the value even smaller (e.g. -5px, -60px, etc.) it makes no difference in any browser; if you make it bigger, then the gaps widen in all browsers. However, WebKit browsers always have that extra padding on the right edge.

Any ideas on how to get rid of this?... I've tried "display: inline-block", "-webkit-border-horizontal-spacing" with various values, "white-space: nowrap"; even altering the HTML so that the images and lis have explicitly defined widths. Nothing works!

Hello All,
I have an image with a text label to the right that is linked. Now, I want a little whitespace between the image and the text, so that the text doesn't butt up right against the image. To accomplish this, I could use a non-breaking space ( ) However, the space then becomes part of the link and it gets underlined. So, by adjusting the image's margin (or padding) CSS, I can achieve the desired result... at least in Internet Explorer.
Firefox/Safari/Chrome seem to underline a linked image's margin as well. I tried using "padding" CSS instead, but produced the same result.

How can I get Firefox/Safari/Chrome to underline JUST the text in a link, and not the image (and it's margin) as well?

This is how the code is displayed in IE:
http://img407.imageshack.us/img407/2360/pfieeu9.jpg

Firefox/Safari/Chrome:
http://img407.imageshack.us/img407/5421/pffirefoxvv1.jpg


You can see the little extra "nubbin" of underline between the icon image and the text.

CSS:
Code:

a.red10ullink:link	     {color: #a80000;
		     font-size: 10pt;
		     font-family: arial;
		     text-decoration: underline;}

a.red10ullink:visited    {color: #a80000;
		     font-size: 10pt;
		     font-family: arial;
		     text-decoration: underline;}

a.red10ullink:hover     {color: #333333;
		     font-size: 10pt;
		     font-family: arial;}

img.icon    {vertical-align: middle;
               border-width: 0px;
               margin: 0px 5px 0px 0px;}

HTML:
Code:

<a href="somepage.html" class="red10ullink"><img src="icon_pf.gif" alt="" width="20" height="20" class="icon" />Printer Friendly</a>

Thanks!

If you go to the example site: devbum.com/coded/audven/

The top navigation seems to be pushed upwards in Windows Safari and Google Chrome and not centered like in FF, IE6, IE7, and Opera. I'm not sure why it's doing this though... does it also render differently on Mac Safari?

Hi Guys

I am struggling to resolve a small issue i am having. I am using a mac, and am working on a contact form for a website.

I am using the latest mac OS and latest versions of all browsers.

The following link is fine in firefox, however, in Safari and google chrome, the 'Message' text area has a big gap above it and I do not know how to get rid of this.

Here is the code for the form...

<form id="form" name="frmQuote" class="contactForm" method="post" action="process.php" onsubmit="return validate_form(this);" >


<ul>
<li>
<label for="name">Name:</label>
<input name="name" id="name" type="text" class="required" />
</li>




<li>
<label for="email">E-mail:</label>
<input name="email" id="email" type="text" class="required email" />
</il>


<li>
<label for="subject">Subject:</label>
<input name="subject" id="subject" type="text" class="required" />
</li>

<li>
<label for="detail">Message:</label>
<textarea name="detail" id="detail" rows="6" cols="60" class="required"></textarea>
</li>


<li>
<input type="submit" name="submit" id="submit" value="Submit" tabindex="100" class="submitBtn" />
</li></ul>

</form>

Here is the css for that page...

#content_about {
color: #666666;
}



/***************************************************
CONTACT
***************************************************/
#form {
margin: 0px;
position: relative;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 15px;
float: left;
}
#form div {
width: 510px;
position: relative;
float: left;
padding-bottom: 9px;
}
#form div label {
width: 400px;
}
#form div label.error {
color: #a80000;
position: absolute;
top: 0px;
right: 0px;
text-align: right;
font-size: 11px;
}
#form div.message_sent {
background-color: #31B8DA;
width: 890px;
float: left;
padding: 10px;
margin-bottom: 15px;
color: #FFFFFF;
}
#form input {
width: 499px;
padding: 8px;
font-size: 13px;
color: #999999;
background-color: #FFFFFF;
float: right;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #C3C3C3;
border-right-color: #E8E8E8;
border-bottom-color: #E8E8E8;
border-left-color: #C3C3C3;
}
#form input:focus, #form textarea:focus {
background-color: #F4F4F4;
}
#form textarea {
width: 500px;
padding: 8px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background-color: #FFFFFF;
color: #aaaaaa;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #C3C3C3;
border-right-color: #E8E8E8;
border-bottom-color: #E8E8E8;
border-left-color: #C3C3C3;
float: right;
margin: 0px;
}
#form .submitBtn {
background-color: #31b8da;
width: 95px;
color: #FFFFFF;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
padding: 0px;
font-size: 16px;
height: 35px;
display: block;
margin-top: 20px;
}
#form .submitBtn:hover {
background-color: #1F93B4;
color: #FFFFFF;
}
#form .submitBtn:focus {
background-color: #4FC1E1;
}

#form strong {
font-size: 24px;
color: #FFFFFF;
font-weight: normal;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #6a6a6a;
display: block;
}
#form .font-11 {
font-size: 11px;
color: #CCCCCC;
display: inline;
}
#content_about #form li label {
margin-top: 0px;
margin-right: 35px;
margin-bottom: 0px;
margin-left: 0px;
line-height: 30px;
}
#content_about #form li {
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 0px;
}


Any help would be greatly appreciated.

Regards

Jay

Hi, my site looks good in all browsers, PC and Mac, except Google Chrome.
Here's the site:site
Do I need to write a CSS exception for Google Chrome?

thanks

Hey, for a while I've been developing a site, just to improve my skills in php etc.
I always tested it in IE7/IE8 and Mozilla 3, I knew other browsers wouldn't render it great, but I also need things to look okay with Chrome.

This is how my site SHOULD look:


This is how it looks in chrome:


My site URL is http://www.pokerbrothers.net
The HTML for the entire page:
The parts that effect the 2 bars that are broken in chrome are highlighted
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" /> 
		<meta http-equiv="X-UA-Compatible" content="IE=7" /> 
		<meta name="keywords" content="poker,brothers,free,fast,simple,texas,holdem,guest" /> 
		<meta name="robots" content="follow,index" /> 
		<title>Home :: PokerBrothers.net</title> 
		
		<link href="http://www.static.pokerbrothers.net/css/include?load=15&x=182&y=631" rel="stylesheet" type="text/css" /> 
		
		<script type="text/javascript"> 
 
			// Globs
			var session_id = "pjpennan89o2m1dn6kjh4n48d7";
			var session_userid = 0;
			var session_username = "Guest_";
			var session_location = "http://www.pokerbrothers.net/";
			var session_location_encoded = "http%3A%2F%2Fwww.pokerbrothers.net%2F";
			var session_location_last = "";
 
			function pageOnLoad () {
				setTimeout("pbhttp_Session_Exit(true, '15')", 900000);
			}
 
		</script> 
 
		<script type="text/javascript" src="http://www.static.pokerbrothers.net/js/class.js" defer="defer"></script> 
		<script type="text/javascript" src="http://www.static.pokerbrothers.net/js/global.js" defer="defer"></script> 
		
 
	</head> 
	<body onload="pageOnLoad();"> 
		<div id="container" align="center"> 
			<div class="bar_container"> 
				<ul id="bar_header"> 
					<li id="bar_header_left"></li> 
					<li id="bar_header_title"><a href="http://www.pokerbrothers.net/"></a></li> 
					<li id="bar_header_fill"></li> 
					<li id="bar_header_howtoplay"><div/><a href="http://www.faq.pokerbrothers.net/play/how"></a></li> 
					<li id="bar_header_signup"><div/><a href="http://www.signup.pokerbrothers.net/"></a></li> 
					<li id="bar_header_play"><div/><a href="http://www.play.pokerbrothers.net/"></a></li> 
				</ul> 
			</div> 
			<div class="bar_container"> 
				<div id="bar_navigation"> 
					<div id="bav_navigation_top"> 
						<div id="bar_navigation_top_left"></div> 
						<div id="bar_navigation_top_fill"> 
							<div id="bar_navigation_top_fill_loginarea"> 
								<form id="navlogin" name="navlogin" action="http://www.login.pokerbrothers.net/login" method="post" onsubmit="return pbhttp_nav_login_check()"> 
									<div id="bar_navigation_top_fill_loginarea_usernamearea"> 
										<input type="text" id="navlogin_username" name="navlogin_username" maxlength="30" value="Username" onfocus="nav_login_form_onclick('user');" onblur="nav_login_form_exit('user')" /> 
									</div> 
									<div id="bar_navigation_top_fill_loginarea_passwordarea"> 
										<input type="text" id="navlogin_password" name="navlogin_password" maxlength="30" value="Password" onfocus="nav_login_form_onclick('pass');" /> 
									</div> 
									<div id="bar_navigation_top_fill_loginarea_submitarea"> 
										<input type="submit" id="navlogin_submit" name="navlogin_submit" value="" /> 
									</div> 
								</form> 
							</div> 
							<div id="bar_navigation_top_left_text"> 
							Welcome to PokerBrothers. Please login or <a href="http://www.signup.pokerbrothers.net/">Sign up</a> 
							</div> 
						</div> 
						<div id="bar_navigation_top_right"></div> 
					</div> 
					<div id="bar_navigation_bottom"> 
						<div id="bar_navigation_bottom_left"></div> 
						<div id="bar_navigation_bottom_fill"> 
							
						</div> 
						<div id="bar_navigation_bottom_right"></div> 
					</div> 
				</div> 
			</div> 
			<div class="bar_container"> 
				<table id="bar_body" cellpadding="0" cellspacing="0" border="0"> 
					<tr id="bar_body_top"> 
						<td id="bar_body_box1_top_left"></td> 
						<td id="bar_body_box1_top_fill" align="center"><div id="bar_body_box1_top_text"></div></td> 
						<td id="bar_body_merge_top"></td> 
						<td id="bar_body_box2_top_fill" align="center"><div id="bar_body_box2_top_text"></div></td> 
						<td id="bar_body_box2_top_right"></td> 
					</tr> 
					<tr id="bar_body_middle"> 
						<td id="bar_body_box1_middle_left"></td> 
						<td id="bar_body_box1_body"> 
Welcome to PokerBrothers.net, bleh.
 
						</td> 
						<td id="bar_body_merge_middle"></td> 
						<td id="bar_body_box2_body"> 
							Load ad here
						</td> 
						<td id="bar_body_box2_middle_right"></td> 
					</tr> 
					<tr id="bar_body_bottom"> 
						<td id="bar_body_box1_bottom_left"></td> 
						<td id="bar_body_box1_bottom_fill"></td> 
						<td id="bar_body_merge_bottom"></td> 
						<td id="bar_body_box2_bottom_fill"></td> 
						<td id="bar_body_box2_bottom_right"></td> 
					</tr> 
				</table> 
			</div>		</div> 
	</body> 
</html>

And the CSS...
Direct links:
Some CSS that effects both bars:
http://www.static.pokerbrothers.net...de?load=6&x=571
The top bar's css:
http://www.static.pokerbrothers.net/css/headerbar.css
the other bar's css:
http://www.static.pokerbrothers.net/css/navbar.css

I'm wondering if anybody has any clues as to why my site appears like this, i've spent hours and hours trying countless things but to no avail.
Any help on anything related to this will be appreicated, thanks .

Oh, and sorry for the lack of commenting in the CSS, it wasnt planned... It is quite messy