|
CSS - Safari Users, See Any Error ?
could anyone with safari go to:
http://www.mmimageart.com/fineart.html http://www.mmimageart.com/fineart2.html http://www.mmimageart.com/fineart3.html and tell me if you see any errors, specially the text under the thumbnails getting out of place? or does everything looks normal to you ? thanks. Similar TutorialsThis afternoon I could finaly continue working of a menu bar. First I did use Table's but after reading a CSS guide ( E. Meyer ), I could change that with a ul/li and CSS. I have floating on the left side: / spacer / two icons / spacer / ... / set of centered links / ... / and floating on the right side / spacer / form fields / Here my CSS Code:
#footer {
clear: both;
padding: 2px 0px 10px 0px;
font: 11px arial, helvetica, sans-serif;
width: 100%;
overflow: auto;
text-align: center;
border: 1px solid;
/*min-height: 23px;
max-height: 32px;*/
position: absolute;
bottom: 0px;
left: 0px;
height: 25px;
}
#footer li.img {
padding-left: 4px;
padding-right: 4px;
float: left;
}
#footer li.spacer {
min-width: 6px;
float: left;
}
#footer li#spacerLeft {
margin-left: 8px;
float: left;
border-left: 2px #ddd dotted;
}
#footer li#spacerRight {
border-right: 2px #ddd dotted;
margin-right: 8px;
float: right;
}
#footer li#txtSelector {
margin-right: 10px;
float: right;
}
#footer a {
clear: both; margin: 0 0 ; height: auto;
}
#footer ul {
text-align: center; margin: 0 0 ; padding: 0; list-style-type: none;
}
#footer li {
padding-left: 3px;
padding-right: 3px;
display: inline;
min-height: 23px;
width: auto;
}
#footer input {
font-family: Verdana; color: #333333; font-size: 7pt;
width: 80px;
}
This with my HTML Code: <div id="menu_container"> <div id="footer"> <ul> <!-- spacer --> <li class="spacer"> <!-- icons --> <li class="img"><img src="comment.gif"> <li class="img"><img src="feedicon.gif"> <li id="spacerLeft" class="spacer"> <!-- links --> <li class="link"><a href="/">Inline test</a> <li class="link"><a href="/">home</a> <li class="link"><a href="/">web</a> <li class="link"><a href="/">Simple more links</a> <li class="link"><a href="/">Simple, even more links</a> <!-- input search field --> <li id="txtSelector"> <form action="search.php" method="post"> <input type="text" name="search" value="Search Here" size="20" >; </form> <!-- spacer --> <li id="spacerRight" class="spacer"> </ul> </div><!-- footer --> </div><!-- footer container --> I am close, with what I want. But If I use this in Safari, it crashes when I make my window small. On FireFox the input field is not in line with the other items. If I the window is to small to show them all, I would love to have the middle li items wraps under them selfs. like: link link link link one two three four and not link one link two link three link four This did work in my table test, but not here. I did have it one time, but I think it was by accident. Does someone have any clue? Thanks Does anyone know this number. My three column layout has the middle (fluid) column below the left and right columns. It is valid and it is fine on Opera and Firefox and IE. I know this can be done and of course now that I want to try it I can't find any sites that have this option to use as a guide and my search didn't turn up anything. Any one here experienced with this or now a site I could use as a guide?? Hello I'm a newbie on this forum and have a CSS problem I could do with some help on. On this website www . glewstonecourt . com (please remove spaces as I can't post links just yet!) I've been told by the client that some website visitors are experiencing problems with the navigation..... the first few buttons are appearing fine, but then the subsequent ones aren't.... but I can't seem to replicate the problem! Any suggestions anyone? bren Hola, I'm about done with my site design. CSS is almost complete, and I'm happy with how the site appears across all browsers. The next step in my development cycle is going to be provide alternate color themes to my users. I will have a default theme, and at the top right corner will be a small palette/swatch of about 7 colors, each representing a color theme. What is the best way to approach this? My idea is that each theme has its own set of color variables which would be included as a file, inserted into the style sheet.Each theme would have it's own include file, and a variable placed in a cookie would determine which theme file was included. ie (i'm using cfml but it should apply to any scripting language) ------------------------------- <cfset background = #e3edc2 > <cfset color = #333 > <cfset text = #686397 > <cfset validated text = blue > <cfset error text = red > <cfset header background = #abd240 > <cfset navbar backgroud = #686397 > ----------------------------------- Then in the actual style sheet I would have --------------------------------------------- <cf include template="theme.cfm"> body { background: #variable#; color: #variable#; font: .8em arial, helvetica, sans-serif; margin: auto; padding:0px; } a { color: #variable#; } .smalltext { font-family: arial, helvetica, sans-serif; color: #variable#; font-size: .7em; } --------------------------------------------------------- Does this seem logical? Basically, I just want people to be able to choose between various color sets that would be applied to the style sheet dynamically. I can then work from one Main style sheet and add color themes as I please. Hey! I would like to write a script that allows users to select .css files from a pulldown menu that is populated by all the .css files located in a given directory. The goal is to "write" the selected file's name into a config file (I assume) so that that particular .css file will be the one used. Then if the user wants to change .css files, they nav. back to the pulldown page and reselect a new .css file. Is this possible? I don't expect that someone will write this for me...but hopefully someone might be able to point me in the right direction... A feature that would allow users to upload (only) .css files would also be excellent...but I realize that would require populating the dropdown with information in my database...(thus negating the first paragraph...) Which method would be better? And how can I go about writing the pulldown selection to a config file? Your wisdom is much appreciated. Thank you. Cranjled PS. If doing this with PHP is not the right way...please don't hesitate to tell me! I only assumed php since my site is in php... I am using the <pre> tag in my application and it works for IE, Firefox, etc... except for Safari. This is what I am using in my css Code:
<STYLE TYPE="text/css">
#Pre tags with word wrapping for Mozilla, etc...
pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
_white-space: pre;
font-family:verdana,arial,sans-serif; font-size:11px; color:#000000;
}
</style>
<!--[if gte IE 5]>
<style type="text/css">
pre {
word-wrap: break-word; /* IE 5.5+ */
white-space: normal; font-family:verdana,arial,sans-serif; font-size:11px; color:#000000;
}
</style>
<![endif]-->
This is how I am using the pre tag in my perl cgi application Code:
my $id = $FORM{'id'};
my $query = "Select title, news_story, begin_date, author from su_archives where news_id = '$id'";
$sth = $dbh->prepare($query);
$sth->execute();
my ($title, $news_story, $begin_date, $author) = $sth->fetchrow_array;
@begin = split(' ',$begin_date);
@date = split('-',$begin[0]);
$startDate = $date[1].'/'.$date[2].'/'.$date[0];
print "<br><b>$title</b><br><br>";
print "<p><i>$startDate</i><br></p>";
print "<PRE WIDTH=55px style=\"font-family: verdana, arial, helvetica, geneva, swiss, sans-serif;\">$news_story</pre>";
Any Suggestions on how this should be revised for Safari? Thanks in Advance I have my webpage coded in HTML 4 and CSS, and everything is valid. It displays perfectly in all browsers, with one exception. In Safari 1.2, the menu background positioning is screwed up. It is supposed to display the b&w image first, then rollover to the color image. Instead, it is displaying the color image, and not repositioning the image so it displays correctly. It works fine in other browsers. any suggestions?? (PS) i'm judging the Safari support by BrowserCam.com, I don't actually have a Mac to test with. And yes, I do need it to work in Safari since this is a class website and we are provided with apple laptops to use. Hi there, I used to use tables to format my websites. I want to use css now for formatting my site but I have a small problem... When I am on my Windows XP computer with IE6 My Site looks just fine. But when I turn on my Mac and I open the page in Safari it ****s up a little bit. And of course I want my site viewable to al users with al browsers on any platform. This is some of the code I used: Code:
body {
background-color: #fff;
margin: 100px 0px 0px 0px;
}
.leftside {
width: 500px;
float: left;
border-right: 1px dashed #999;
padding: 0px 0px 0px 100px;
}
.rightside {
width: 150;
padding: 10px
}
this is the url of my testpage: www.headradio.net/template/index.php Just take a look how it looks in safari (or firefox) and how it looks in IE6 Thanks Daan Hi, so far I have my website look the same on IE7, (maybe IE6), FireFox, and Opera. Now there is another browser called Safari for Mac! How can I test my website on Safari if I only have a PC? also should I worry on this!? or if my website works on FireFox then it means it will work on Safari as well? regards, Sim085 I've got a body of text within a DIV tag. For some reason, if I roll my mouse over the text, the entire body of text changes color as if it were a link. I've double checked to see if there are any open HREF tags but there are none. Any ideas? Safari 1.3 on Mac OSX 10.3.9 if it matters. I've also tested on Netscape, Opera, Firefox and IE and all of these work fine. here be the code: Code: .mainBody {
color: #000;
font-family: helvetica, arial, "sans serif";
font-size: 12px;
text-align: justify;
padding-left: 35px;
padding-right: 35px;
}
.mainBody:link, .mainBody:visited {
color: #600;
text-decoration: underline;
}
.mainBody:active, .mainBody:hover {
color: #996600;
text-decoration: none;
}
.pageLinks {
color: black;
font-family: helvetica, arial;
font-size: 14px;
text-align: center;
}
.pageLinks:link, .pageLinks:visited {
color: #960;
text-decoration: underline;
font-size: 14px;
}
.pageLinks:active, .pageLinks:hover {
color: #960;
text-decoration: none;
font-size: 14px;
}
I'm using the "first-letter" feature with CSS which shows up fine in IE, but is totally off in Mac's Safari. Any suggestions on a workaround? The following is what I have currently: In main.css file: p.initial:first-letter { font-size: 300%; float: left} In actual page: <p class="initial">Welcome! I think i have some overlapping style because safari is displaying white space over my images. any help would be greatly appreciated! http://lonepineprairiepillows.com/cart/Results.cfm?category=2 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 Hi. I just discovered that my site has issues in Safari. Everything is fine in FF. Take a look in safari: bestplaceon.net. 1. Gallery thumbnails are all over the layout. 2.Right upper corner Google Plus is gone. 3.Text size is to big for Safari I have tried different ways to fix this problem but without success. Every help would be nice. Thank you! http://www.mbsnyder.com/index2.shtml On the "profile" and "contact" areas, there are two separate uls that are acting strange in Safari. The "profile: the rest of the story" section appears almost semi-transparent, and the "contact: email" link doesn't appear unless you mouseover it. These issues only seem to occur in Safari. Not sure what's wrong here. Any help is, as always, much appreciated! Thanks in advance. I am making a Mac help site for a friend, and want the site to be compatible with as many browsers as possible. I am aware that IE doesn't follow the rules with css, which is why I have made a plain version of the site as well. Basically, the site is composed of two tables, the top one is the banner with buttons, and the bottom one has text. The background is fixed, as is the top table (so the only thing that moves when you scroll is the table with the text). My problem is that the top table can be centered either for Safari, or Firefox, but I have not found a way to center both of them. EDIT: The site is at www.ihelpnyc.com/dave/index1.html . It will probably change, but it's a good reference to see what I'm doing When I do this, it is centered on Firefox: Code:
<style type="text/css">
<!--
body {
background-image: url(background.gif);
background-repeat: repeat-x;
background-attachment:fixed;
background-color: #000000;
}
#toptable {
position: fixed;
top: 0;
height: 140px;
bottom: auto;
z-index: 2;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#encapsule {
margin-left: auto;
margin-right: auto;
}
#centered
{
text-align: center;
}
#centered table
{
margin: 0 auto;
text-align: auto;
}
#bottable {
position: relative;
margin-left: auto;
margin-right: auto;
top: 140px;
z-index:1;
}
-->
</style></head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div align="centered" id="encapsule">
<table width="720" border="0" cellpadding="0" cellspacing="0" id="encase">
<tr>
<td><table width="200" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#2C2C2C" id="toptable">
<tr>
<td><table width="720" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td colspan="5"><img src="images/index_01.gif" width="360" height="109" alt=""></td>
<td colspan="2"><img src="images/index_02.gif" width="360" height="109" alt=""></td>
</tr>
<tr>
<td><img src="images/index_03.gif" width="47" height="31" alt=""></td>
<td><a href="index1.html"><img src="images/index_04.gif" alt="" width="102" height="31" border="0"></a></td>
<td><a href="about.html"><img src="images/index_05.gif" alt="" width="92" height="31" border="0"></a></td>
<td><a href="contact.html"><img src="images/index_06.gif" alt="" width="104" height="31" border="0"></a></td>
<td colspan="2"><a href="help.html"><img src="images/index_07.gif" alt="" width="145" height="31" border="0"></a></td>
<td><img src="images/index_08.gif" width="230" height="31" alt=""></td>
</tr>
<tr>
<td><img src="images/spacer.gif" width="47" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="102" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="92" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="104" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="15" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="130" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="230" height="1" alt=""></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table> </div>
When I do the following, it centers it on Safari: Code:
<style type="text/css">
<!--
body {
background-image: url(background.gif);
background-repeat: repeat-x;
background-attachment:fixed;
background-color: #000000;
}
#toptable {
position: fixed;
top: 0;
height: 140px;
bottom: auto;
z-index: 2;
}
#encase {
position: relative;
margin-left: auto;
margin-right: auto;
}
#bottable {
position: relative;
margin-left: auto;
margin-right: auto;
top: 140px;
z-index:1;
}
-->
</style></head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="720" border="0" cellpadding="0" cellspacing="0" id="encase">
<tr>
<td><table width="200" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#2C2C2C" id="toptable">
<tr>
<td><table width="720" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td colspan="5"><img src="images/index_01.gif" width="360" height="109" alt=""></td>
<td colspan="2"><img src="images/index_02.gif" width="360" height="109" alt=""></td>
</tr>
<tr>
<td><img src="images/index_03.gif" width="47" height="31" alt=""></td>
<td><a href="index1.html"><img src="images/index_04.gif" alt="" width="102" height="31" border="0"></a></td>
<td><a href="about.html"><img src="images/index_05.gif" alt="" width="92" height="31" border="0"></a></td>
<td><a href="contact.html"><img src="images/index_06.gif" alt="" width="104" height="31" border="0"></a></td>
<td colspan="2"><a href="help.html"><img src="images/index_07.gif" alt="" width="145" height="31" border="0"></a></td>
<td><img src="images/index_08.gif" width="230" height="31" alt=""></td>
</tr>
<tr>
<td><img src="images/spacer.gif" width="47" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="102" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="92" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="104" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="15" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="130" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="230" height="1" alt=""></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
Any help is appreciated, as I am totally stuck. I have been using http://theodorakis.net/tablecentertest.html to see which works on both Firefox and Safari, but none of them work for both. Thanks! EDIT: The site is at www.ihelpnyc.com/dave/index1.html . It will probably change, but it's a good reference to see what I'm doing Is it possible to designate a width in CSS just for Safari on a Mac? Hi there, currently, my site uses CSS and it works perfectly in FF and IE. But when it comes to Safari, it doesnt seem to pull the CSS up properly, if at all. (www.nsma.com/store) Just wondering if anyone can help/shed light on this. the css file is at store/stylesheet.css. Im offerin payment if u can help. paypal is best for me, let me know Many thanks in advance http://www.alexwait.com/Nortonville...ester/main.html When I load the page in Safari, Opportunities has a border around it that is messing up the whole bar. It stinks. What should I use with CSS to get that to go away? EDIT: Fixed title. |
|||||||