CSS - Safari Rendering Issue

This is a bit of a weird one as its thrown me completely! I have a very simple collection of styled divs which when viewed in IE look rubbish as they have added a few extra pixels in height to the bottom. I've realized that this looks like a rendering issue as when you scroll the window down and back up the extra image thats appearing sometimes changes according to the speed you scroll at!!! (sometimes the line disappears and then re-appears if you scroll faster) I'm using IE 7 (emulated through IE8 as the real IE7 doesn't work on my vista machine????) also the IE tab mod for firefox and my brothers old xp machine with a working IE7 and the issue is occurring on all 3. However when put in IE8 mode it works

Here is a lovely images to show whats going on...



css + html...

Code:

	<div style="padding:10px;">
		<div style="background:url(/images/forums/middle.jpg) repeat-x left top;">
			<div style="background:url(/images/forums/left.jpg) no-repeat left top;">
				<div style="background:url(/images/forums/right.jpg) no-repeat right top; padding-bottom:10px;">
					<div style="padding:18px; color:#FFFFFF; font-size:18px; padding-bottom:30px;">Catagories</div>

					<div style="padding-left:40px; padding-right:40px;">
						<div style="font-size:14px;">Help and support with the Site</div>
						<div style="font-size:10px;">Need help with something on the site?</div>
					</div>
					
					<hr size="1" color="#999999" style="margin:10px 40px 10px 40px;">
					
					<div style="padding-left:40px; padding-right:40px;">
						<div style="font-size:14px;">Help and support with the Site</div>
						<div style="font-size:10px;">Need help with something on the site?</div>
					</div>
				</div>
			</div>
		</div>
		<div style="background:url(/images/forums/middle_bottom.jpg) repeat-x left top; height:4px;">
			<div style="background:url(/images/forums/left_bottom.jpg) no-repeat left top; height:4px;">
				<div style="background:url(/images/forums/right_bottom.jpg) no-repeat right top; height:4px;"></div>
			</div>
		</div>
	</div>

thanks in advance for any reply

Hey all,

I am just starting to develop a new site for my web design company, though i'm doing it in mac os x env using camino, so to my horror, when i finally got around to checking it in IE, I discovered that everything was horribly wrong. All of the div's that were supposed to be floated left are now overlapping the right float. I've read a few articles which all suggest different things, i.e. putting 'display: inline' in all the float styles. That didn't work.

I don't have the time to figure it all out though I'm sure it's a simpleish solution. I'd really appreciate the help.


Pete

Trying to resolve the spacing issues when using a list. IE honors the set margin while FF appears to add much more amrgin spacing. I have tried using display:inline but when I do, I lose the haning indent.

Any suggestions?

My site displays correctly in Firefox and IE (which was hassle enough) but when I view it in Safari on my Macbook, the last nav menu item is pushed down below the rest of the menu instead of in line with the rest of the menu. I just got my macbook, and I'm not very in touch with al of Safari's quirks yet, but I was under the impression that it was more reliable than FF or IE. Does anyone have any idea what's causing this, and how I can fix it?

http://www.wwu.edu/~swing

This main navigation does not display properly in Safari and I was hoping somone might be able to tell me why

http://hometown.tmhdesign.com

Hi,

www.personaldevelopment.ca looks great in firefox and IE, but in konqeror/safari (i test in konq because it uses the same html rendering engine) the top left is stretched a tad further than it should. Anyone have any suggestions to fix this? I am out of ideas.


http://www.uberwald.com/images/pdtop.jpg (Thanks zAlanm)

Thanks.

tdela

Hi,

I am trying to use rounded corners for the top left and right of a div in safari, but i cannot work it out.

This is my code:

PHP Code:
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
-khtml-border-radius: 5px 5px 0px 0px;
border-radius:  5px 5px 0px 0px; 





the corners are fine in other browsers, but they appear square in safari. If I change this line to:

-webkit-border-radius: 5px;

then the corners are rounded. But how can I get just the top left and top right corners to be rounded?

Any ideas would be great.

Thanks

Hi All,

I was wondering if someone could help and take a look at this. I have a site that is not displaying correctly in chrome and also Safari (at least on the iPhone).

The rest of the page is fine, but these images appear stretched vertically (the horizontal width appears OK).

The CSS for the element is:

CSS Code:
Original - CSS Code .keybox{float:left;margin:1px;width:100%;text-align:justify;padding:0px;padding:5px;line-height:100%;} .keybox img{float:left;width:35%;padding:0px;margin:0px;} .keybox div{float:right;width:60%;padding:1%;} .keybox div ul{text-align:left;margin:0px;padding:0px;}

  

 .keybox{float:left;margin:1px;width:100%;text-align:justify;padding:0px;padding:5px;line-height:100%;}


 .keybox img{float:left;width:35%;padding:0px;margin:0px;}


 .keybox div{float:right;width:60%;padding:1%;}


 .keybox div ul{text-align:left;margin:0px;padding:0px;} 

The html for the element is:

html Code:
Original - html Code <div class='keybox'> <img class='products_images' src='/images/powerparts.gif' alt='Perkins Generator Parts Basket' /> <div> <h2><a href='/diesel_generator_ranges/www_support_spares/'>Perkins and Volvo Spares </a></h2> <p> ".COMPANY_SHORTNAME." spares for <strong>Perkins Engines</strong> and <strong>Volvo Penta engines</strong>. <strong>Mecc Alte AVR</strong>, <strong>Newage Stamford AVR</strong> and many other makes. </p> <ul> <li><a href='/parts/perkins/'>Perkins Spare Parts</a></li> <li><a href='/parts/volvo/'>Volvo Spare Parts</a></li> <li><a href='/parts/mecc-alte/'>Mecc Alte Spare Parts</a></li> <li><a href='/parts/newage-stamford/'>Newage Stamford Spare Parts</a></li> </ul> </div> </div>

  

<div class='keybox'>
<img class='products_images' src='/images/powerparts.gif' alt='Perkins Generator Parts Basket' /> 
<div>
<h2><a href='/diesel_generator_ranges/www_support_spares/'>Perkins and Volvo Spares
</a></h2>
<p> ".COMPANY_SHORTNAME." spares for <strong>Perkins Engines</strong> and <strong>Volvo Penta engines</strong>. <strong>Mecc Alte AVR</strong>, <strong>Newage Stamford AVR</strong> and many other makes. </p> 
<ul> 
<li><a href='/parts/perkins/'>Perkins Spare Parts</a></li> 
<li><a href='/parts/volvo/'>Volvo Spare Parts</a></li>
<li><a href='/parts/mecc-alte/'>Mecc Alte Spare Parts</a></li>
<li><a href='/parts/newage-stamford/'>Newage Stamford Spare Parts</a></li>
</ul> 
</div>
</div>

The image stretches - it works fine on firefox and IE8.

The web address is www.wellandpower.net

There are 3 of these html elements on the left hand side of the page.

TIA

Regards

Charlie

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 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

Background info:
- I have validated the page and CSS, no problems there
- Site is working properly in Firefox and IE, seems to be a margin issue in Safari
-This margin issue is not the common Safari bug with a negative margin being applied to a floated element
-I am using Safari in a windows environment, I do not have a Mac

The problem:
-in Safari the top margin on the content either is either not being applied at all or is being interpreted differently
-it may be of note that I was having the same issue with IE, but was able to specify an IE specific style sheet for it, I don't believe this is possible in Safari?

The website:
http://www.lisa-noble.com/test/redo.html

The HTML
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
  <title>Site Test</title>
  <link rel="stylesheet" type="text/css" href="redo.css" />
   <!--[if IE]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
</head>

<body>

<div id="top_filler">
</div>

  <div id="left_filler">
</div>

<div id="right_filler">
</div>

<div id="top_left">
</div>

<div id="header">
</div>

<div id="top_right">
</div>

<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>   

<p>Etc, etc, etc....</p>
</div>

<div id="bottom_filler">
</div>

<div id="bottom_left">
</div>

<div id="bottom_right">
</div>

</body>
</html>

The CSS
Code:

* {
   margin: 0;
   padding: 0;
}

body {
   background: #fdd9e9;
}

div#top_filler {
   background: url(images/bg_slice_sm.png) repeat-x;
   width: 100%;
   height: 164px;
   position: fixed;
   top: 0px;
   z-index: 5;
}

div#left_filler {
   background: url(images/left_slice_sm.png) repeat-y;
   width: 174px;
   height: 100%;
   position:fixed;
   left:0px;
   z-index: 5;
   
}

div#right_filler {
   background: url(images/right_slice_sm.png) repeat-y;
   width: 161px;
   height: 100%;
   position:fixed;
   right: 0px;
   z-index:5;
}

div#bottom_filler {
   background: url(images/bottom_slice_sm.png) repeat-x;
   width: 100%;
   height: 76px;
   position: fixed;
   bottom: 0px;
   z-index: 5;
}

div#header {
   position: fixed;
   top: 0px;
   left: 37%;
   height: 125px;
   width: 316px;
   margin: 0 auto;
   background: url(pink_logo2.png) no-repeat;
   z-index: 25;
}

ul.NoBulletNoIndent {
  list-style-type: none;
  margin-left: 0px;
  padding-left: 0px
}

div#top_left {
   height: 314px;
   width: 221px;
   background: url(images/left_top_corner_sm.png) no-repeat;
   position: fixed;
   top: 0px;
   left: 0px;
   z-index: 5;
}

div#bottom_left {
   height: 175px;
   width: 176px;
   background: url(images/left_bottom_corner_sm.png) bottom no-repeat;
   position: fixed;
   bottom: 0px;
   left: 0px;
   z-index: 5;
   
}

div#top_right{
   height:174px;
   width:174px;
   background: url(images/right_top_corner_sm.png) top no-repeat;
   position: fixed;
   top:0px;
   right: 0px;
   z-index:5
}

div#bottom_right{
   height: 602px;
   width:198px;
   background: url(images/right_bottom_corner2_sm.png) bottom no-repeat;
   position: fixed;
   bottom: 0px;
   right: 0px;
   z-index: 5
}

div#content {
   margin: 40px 164px 0px 180px;
   position: relative;
   z-index: 1;
}

Hello,

I am using ASP.NET to create a web application. I HAVE to use a master page which means that I do not have complete control over the rendering.

The trick is, the master page defines a menu at the top of the page. I need to create a table that dynamically fills the contents of the REMAINDER of the screen. If there is any overflow, I want to scroll the contents.

Does anyone know how I can have the table fill the REMAINDER of the screen? I can nest DIVs and such once I have that outer table.

Thank you!
Crystal

Greetings everyone! I've been working on the following page for a couple of days now, and it looks fine in Safari and Firefox, but all my CSS fail in IE. I don't know what the problem is. Feel free to view the page at the following url http://www.netunification.com/demo/

I spoke with a friend and he speculates IE is having problems with the float command. I'm not so sure of this because I used the same CSS techniques while building the following site (http://www.the904.com/demo/).

The904 page renders perfectly in IE and I can't figure out what the difference is between the pages. I thought I used the same concept with both pages.

I've been trouble shooting the problem for a couple of days now, but I haven't had any luck. Can please someone take a look at my net u page (http://www.netunification.com/demo/) and suggest a solution

Thanks in advance for any/all assistance. Your time and effort is greatly appreciated!

Walt

Hi guys, pretty new to CSS layout, and recently created a site for my girlfriend. I used 960 grid system to handle my layout css, and it renders perfectly in safari/FF/IE7+... after I installed IE Tester, i realized that IE6 wasnt rendering properly. The menu and z-index stuff arent appearing correctly.

If anyone can have a quick look and let me know where my code is causing issues it would be a great help.

I'm not allowed to post the URL, as im a new user, but I guess I can send through PM if you want to have a look?

Thanks a bunch.

Ive noticed this is only a problem in IE6(and probably some more older browsers)...Firefox 3 and IE 7 it works fine.

Visit this site: (you will have to do it twice because you need to login first.)

http://ronnieswietek.com/flashden/newsletter/newsletter.php?do=preview&id=2

u: admin
p: testadmin

I put a blue background on the div so you can understand what I am talking about. If you look at it in firefox, the blue covers the whole newsletter, text and images, but if you look at it in IE, it only does a small portion of it...Can anyone figure out this mystery???

CSS for that section:
Code:

#newsletter_subject
{
	padding: 5px;
	font-size: 18px;
	color: #ffffff;
	background-color:#999999;
}

#newsletter_preview
{
	overflow: auto;
	background-color:#000066;
}

#recipients
{
	padding: 5px;
	font-size: 18px;
	color: #ffffff;
	background-color:#999999;
}

and then the corresponding html:

Code:

<div id="newsletter_subject">flashden newsletter!</div>
<br>
<div id="newsletter_preview"><font size="6"><span style="font-weight: bold; color: rgb(153, 255, 153); font-family: georgia;">flashden <span style="text-decoration: line-through;">is</span> <span style="color: rgb(204, 0, 0); background-color: rgb(0, 0, 0);">awesome</span> <span style="font-family: impact; font-style: italic; text-decoration: underline; color: rgb(153, 255, 0); background-color: rgb(0, 51, 204);">I</span>!</span></font><br>
  <br>
  <img style="width: 202px; height: 261px;" alt="" src="http://flashden.net/new/site_flashden.net/interface/logo_top.gif" align="left"><br>
</div>
<br>
<div id="recipients">This Newsletter WILL be sent to the following users:</div>
etc.....