|
CSS - Div Class Not Behaving In Safari - Work Around?
Hey Guys...
I have a piece of code that displays ok in Firefox (and I suppose IE) but not Safari. Here's the URL - http://www.pizza.bowlerhatmedia.com/spc/theusual.html In safari everything squishes left. In firefox they spread out like they are supposed to across the bottom. Here's the line of code in the html doc: Code: <div class="contentbox2_2"> <span style="padding-right:10px"></span>Petite: <span class="red">$11</span> <span style="padding-right: 160px;"></span> Medium: <span class="red">$14</span> <span style="padding-right: 170px;"></span> Large: <span class="red">$16</span> </div> and here's the supporting CSS Code:
}
.contentbox2_2, .contentbox3_2 {
font-size: 15px;
font-weight: normal;
}
.red {
color: #ac3a24;
}
What can I do to position these across the bottom in safari and make everything else ok in the other browsers? thanks! Similar TutorialsHi guys. Straight to pictures: Fig. 1: Differences in rendering between Standards compliant browsers and Internet Explorer. Link for html page is www.sential.co.uk/releases.html (this is my example page, but it's the same problem with all pages.) Now, apart from the fact they're different colors (which is a little strange), the positioning of the border images in IE is different than Safari/Firefox. I've tried playing with the code and positioning over and over with no luck. If I change one to look right, basically, the other ends up looking wrong. I have 4 corner images and 4 repeating borders. They're all positioned using css in my style sheet, in the format of, basically: Code: .corner_topleft{
position: absolute;
top: 0px;
left: 0px;
...
}
and so on in that respect for the 4 corners and: Code: .border_left{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
background-repeat: x;
...
}
etc. for the borders. I have specified all the heights of the images. Now the problems in the pictures a #1: the left and right borders don't repeat down, #2: the right edge border+corners seem to be out 17px (the width of the border). Although don't think you can simply specify the right border to be inwards 17px because if you do that, in Safari/Firefox, the background blue color overflows 17px outwards (because it's currently underneath that right border. Although, apparently not in IE.) If any of you guys can offer any help, suggestions, or maybe even a fix, that would be awesome and very appreciated. Regards, -Luke (: Well they seem to work in both IE and FIREFOX but I just can't seem to get anchors to work in Safari. Apparently this is an issue to do with CSS and the overflow property. I found some information on it he http://blog.deconcept.com/code/over...flowsafari.html However the fix doesn't seem to work for me. The page I am working on is he http://www.tumbara.com/demo/index2.php?action=about#c1 I've tried all sorts of things to try to get this to work but no such luck. I'm just at my wits end. Any ideas what could be happening here? I've got this page here and for some reason, it works fine in Internet Explorer, but in Safari, everything is aligned to the left!? Which is strange, because the Glish tutorial I'm using works just fine in both IE and Safari. What have I done wrong in my code?? Hi all Another stupid annoyance relating Internet Explorer: it seems IE6 does not recognize the following CSS selector rule: tag#id.class e.g. div#content.active One has to split it into div#content .active Is that right? Do we just have to live with this? Greetings, Josh Hi all, I am using <tr class="caption"> in order to control the properites of a line in a table. The problem is: this will not work. Nothing that is written in this CSS tag will work my CSS tag: Code: tr.caption {
font-weight: bold;
font-size: 14px;
text-decoration: none;
background-color: #000000;
color: #FFFFFF;
}
any idea why?? I am greateful for any answer! Dekers Hi, Is there a good way to use css to make every element with a specified class name to have some hover attribute, for instance .class:hover would do something? For some reason it doesn't work for me unless I say div.class:hover or a.class:hover, etc. I have to specify an element. ok so I have a menu done via CSS and initially I set up a left border on it so it shows up like this: | menu 1 | menu 2 | menu 3 Now with the help of JQuery I am trying to get rid of the | on the menu 1.. Jquery is applying the class to the correct a selector but the border is not being removed? if I change the css to "border: 1px solid black" it applies the border to the whole of menu 1 but the left border still stays WHITE? the css class is: .removeBorder { border:0; } the menu CSS is: Code:
ul.navigation-1 li a,
ul.navigation-1 li a:link,
ul.navigation-1 li a:visited
{ padding:4px 10px; display:block;text-decoration:none; border-left:1px solid #ffffff;color:#ffffff; width:100%; height:13px; }
If i remove the border-left attribute from here, the border goes away.. and via Jquery I am targetting the A.. so what is the problem? Just a FYI: html code: Code: <div id="left-menu"> <ul class="navigation-1"> <li><a class="removeBorder" href="">Products</a><ul class="navigation-2"><li><a href="">A-Z List</a></li><li><a href=""> Anyone know how to fix the bottom bars width? Page he http://www.milztech.net/ Cheers! Ok ive got this small concept i need to work in order for me to implement it on the actual website. this code works 100% correct to how i want it to in FireFox. I have an image within a table TD tag , but i need the image to float outside the tables borders, i can do this with the margin-right: -20px; In firefox i can still see the full image been displayed, but in IE the image falls behind the table limits and then does not display any more. Please help me sort this one out. Code: <html>
<head>
<title>Untitled</title>
<style>
.test {
margin-right: -30px;
float: right;
z-index: 2;
}
.table{
z-index: 10;
}
</style>
</head>
<body>
<table align="center" width="300" border="1" class="table">
<tr>
<td> </td>
<td><img class="test" src="http://nexxon.galore.co.za/images/stories/animated_slidshow_02gif.gif" /></td>
</tr>
</table>
</body>
</html>
I have a new layout I'm currently working on. It's got a container with 2 columns, one floated left and one floated right. Inside the left column (lcol) I have a series of content areas making up two columns. Floated left and on the upper left is a flash video. Below that and also floated left is a table of contents list. On the right side of lcol, my intent is to add a news list and an events list. I have the news list floated right with the left floats cleared. My issue is that the news list is pushing way to the bottom of the screen even though my width is not larger than the available width for that column. In IE6, the list is behaving as expected, but not in FF which I always do my primary testing in, so that's what led me to believe something is wrong. Here is my code (remember the site is in its initial development) I've also attached a screenshot of the appearance in FF. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Orion Main</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
var params = {};
params.play = "true";
params.loop = "false";
params.menu = "true";
params.quality = "high";
params.scale = "showall";
params.wmode = "window";
params.devicefont = "false";
params.allowfullscreen = "false";
params.allowscriptaccess = "sameDomain";
var attributes = {};
swfobject.embedSWF("orion_intro_video.swf", "intro", "320", "310", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
</script>
</head>
<body>
<div id="logo"><img src="images/orion_logo.jpg" alt="Orion Logo" title="Orion Home" width="154" height="100"/></div>
<div id="container">
<div id="lcol">
<div id="intro">
Your browser cannot display FLASH, please follow the link below to install it.<br/>
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
</div>
<ul id="nav">
<li><a href="#">Thought Leaders</a></li>
<li><a href="#">Success Stories</a></li>
<li><a href="#">Validation</a></li>
<li><a href="#">Strategic Partners</a></li>
<li><a href="#">Environmental Stewardship Award</a></li>
<li><a href="#">Newsletter</a></li>
<li><a href="#">Energy Solutions</a></li>
<li>
<a href="#">Media</a>
<ul>
<li><a href="#">News Releases</a></li>
<li><a href="#">Media Kit</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</li>
<li><a href="#">Investor Relations</a></li>
<li><a href="#">Partners for Profits™</a></li>
<li><a href="#">Agricultural Division</a></li>
<li><a href="#">Orion Asset Management</a></li>
</ul>
<ul id="latest_news">
<li><a href="#">News Item #1</li>
<li><a href="#">News Item #1</li>
<li><a href="#">News Item #1</li>
<li><a href="#">News Item #1</li>
<li><a href="#">News Item #1</li>
</ul>
<ul id="events">
<li><a href="#">Event #1</li>
<li><a href="#">Event #1</li>
<li><a href="#">Event #1</li>
<li><a href="#">Event #1</li>
<li><a href="#">Event #1</li>
</ul>
</div><!-- end lcol -->
<div id="rcol">
</div><!-- end rcol -->
</div>
</body>
</html>
CSS Code:
@charset "utf-8";
/* CSS Document */
body {
font-family: Verdana, Geneva, sans-serif;
margin: 15px auto 0;
padding: 0;
text-align: center;
background: url('../images/body_back.jpg') repeat-x #373737;
}
#logo {
width: 960px;
height: 100px;
margin: 0 auto;
text-align: left;
background: url('../images/header_back.gif') repeat-x #b4de5a;
}
#container {
width: 940px;
margin: 0 auto;
height: auto;
text-align: center;
background-color: #FFFFFF;
clear: left;
padding: 0px 10px 10px 10px;
overflow: auto;
}
#lcol {
float: left;
width: 626px;
height: auto;
overflow: auto;
text-align: left;
}
#intro {
text-align: left;
float: left;
width: 320px;
height: 310px;
background-color: red;
}
#nav {
clear: left;
width: 320px;
height: auto;
list-style-type: none;
text-align: left;
padding: 0;
margin: 0;
float: left;
}
#latest_news {
background-color: green;
height: auto;
width: 250px;
list-style-type: none;
padding: 0;
margin: 0;
text-align: left;
float: right;
clear: left;
}
#events {
clear: right;
float: right;
width: 250px;
height: auto;
background-color: yellow;
list-style-type: none;
}
#rcol {
float: right;
width: 303px;
height: 500px;
}
I am almost finished with a site, but the buttons in the main navigation are behaving badly; when you put the mouse over them (only in IE of course..) they only activate when you are about 10 pixels away from the top of the page. Link- http://www.hamlettinstruments.com/beta/ can someone help me figure out why this is? Thanks, ad www.clydesdaleframes.com/test/fortran.html Does anyone know why my "next page" button's background is extending the full width of the text like that? css is www.clydesdaleframes.com/test/styles.css thanks in advance, Chris I've used the 3 column layout from http://bluerobot.com/web/layouts/layout3.html to create this page http://www.quiznightatthefrog.co.uk/teams.php The rest of the site is OK in IE but on this page the middle column stretches over to the right when there is a lot of content in the middle column. When I remove the middle column content it works ok. The problem does not appear in Opera6 or Netscape7 but they make the right column move down under the left column. sigh. Any suggestions please?? oops, here's the code body { scrollbar-base-color : #339900; scrollbar-track-color : #009900; scrollbar-arrow-color : honeydew; background: honeydew url(images/lily_pad.gif) no-repeat bottom right; color:#333; background-color:honeydew; margin:20px; padding:0px; font:11px verdana, arial, helvetica, sans-serif; } h1 { margin:0px 0px 15px 0px; padding:0px; font-size:15pt; font-weight:900; font-family: verdana; color:#006600; } h2 { font:bold 12px/14px arial, helvetica, sans-serif; margin:0px 0px 0px 0px; padding:0px; } .teams { font:bold 12px arial, helvetica, sans-serif; color: #003300; line-height:20pt; } p { font:11px/20px verdana, arial, helvetica, sans-serif; margin:0px 0px 16px 0px; padding:0px; } .Content>p {margin:30px;} .Content>p+p {text-indent:30px;} a { color:#09c; font-size:11px; font-family:verdana, arial, helvetica, sans-serif; font-weight:600; text-decoration:none; } a:link {color:#006600;} a:visited {color:#006600;} a:hover {background-color:#c0c0c0;} /* All the content boxes belong to the content class. */ .content { position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */ width:auto; min-width:130px; margin:0px 190px 20px 190px; border:3px solid #003300; background-color:white; padding:10px 10px 10px 10px; z-index:1; /* This allows the content to overlap the right menu in narrow windows in good browsers. */ } #navAlpha { position:absolute; width:150px; height:500px; top:20px; left:20px; border:2px solid #003300; background-color:honeydew; padding:10px; z-index:2; /* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity. Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it. IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style declaration. The incorrect IE5/Win value is above, while the correct value is below. See http://glish.com/css/hacks.asp for details. */ voice-family: "\"}\""; voice-family:inherit; width:150px; } /* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct length values to user agents that exhibit the parsing error exploited above yet get the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above). */ body>#navAlpha {width:150px;} #navBeta { position:absolute; width:170px; top:20px; height:300px; right:10px; bottom:0px; border:2px solid; padding:30px 10px 10px 10px; z-index:3; /* Again, the ugly brilliant hack. */ voice-family: "\"}\""; voice-family:inherit; width:168px; } /* Again, "be nice to Opera 5". */ body>#navBeta {width:168px;} My link hover style isn't happening consistently in either browser. It seems to work better in FF than in IE7. Does anyone have a clue as to what I could look at to see what is causing this? All my navbar links behave just fine... URL removed Thanks! So, I've got the following CSS code that I use to give a cell a background that aligns to the bottom: Code:
td.flag {background: url(images/flag_s.gif) no-repeat center bottom;}
td.main {background: url(images/march.gif) no-repeat center bottom;}
Unfortunately, only the td.main works as it should. The first entry td.flag doesn't show the image. I have verified that the gif image of flag_s.gif exists in /images/ and I cannot figure out why td.flag won't work when td.main does.... Any ideas? The CSS is syntactically correct. In my html I call td class="flag".... doesn't work. Any help would be appreciated! I'm having a horrible time trying to figure out what is wrong with my dropdown menu. I cannot get it to work as it should in Internet Explorer, though it's fine in Firefox and Chrome. In Firefox, it is perfectly aligned to the center of the navigation bar, but in Internet Explorer, it is not and is elevated towards the top. In FF, there are links that dropdown under a few of the links when you hover over the initial link. This does not happen in IE. However, in both IE and FF, the background of the initial link turns dark green when you hover over it (as it should). Simply, I need the links in Internet Explorer look as they do in Firefox. I've gone through for days and tried to see what's wrong, but I can't think of anything. Here's the menu's CSS: Code: .menu {
border:none;
border:0px;
margin:0px;
padding-top: 5px;
padding-left: 3px;
font-family: Tahoma;
font-size: 20px;
}
.menu ul {
margin: 0px;
padding: 0px;
list-style: none;
height: 35px;
}
.menu li {
float: left;
padding: 0px;
}
.menu li a {
color: #000;
line-height: 35px;
display: block;
padding: 0px 25px;
text-align: center;
text-decoration: none;
margin:0px;
}
.menu li a:hover, .menu ul li:hover a {
background: #919d21;
color: #000;
text-decoration: none;
}
.menu li ul {
background: #919d21;
display: none;
height: auto;
position: absolute;
width: 150px;
padding: 0px;
border: 0px;
margin: 0px;
z-index: 200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul {
display: block;
}
.menu li li {
width: 150px;
margin:0px;
padding:0px;
display: block;
float: none;
}
.menu li:hover li a {
background: none;
}
.menu li ul a {
display: block;
height: 35px;
font-size: 12px;
font-style: normal;
margin: 0px;
padding: 0px 10px 0px 15px;
text-align: left;
}
.menu li ul a:hover, .menu li ul li:hover a {
background: #a7b235;
border: 0px;
color: #000;
text-decoration: none;
}
.menu p {
clear: left;
}
Here's the menu's HTML: Code: <ul> <li><a href="home.html"><img src="/images/icons/house.png" border="0">Home</a> <ul> <li><a href="home.html">Home</a></li> <li><a href="createacre.html">Acres</a></li> <li><a href="facilities.html">Facilities</a></li> <li><a href="inventory.html">Inventory</a></li> <li><a href="brand.html">Brand</a></li> <li><a href="shop.html">Shop</a></li> <li><a href="logout.html">Logout</a></li> </ul> </li> <li><a href="corral.html"><img src="/images/icons/world.png" border="0">Atlas</a> <ul> <li><a href="corral.html">Corral</a></li> <li><a href="shows.html">Shows</a></li> <li><a href="trade.html">Giving Center</a></li> <li><a href="jobpage.html">Employment Agency</a></li> <li><a href="store.html">General Store</a></li> <li><a href="searchvets.html">Veterinarian</a></li> <li><a href="traininglinks.html">Training</a></li> <li><a href="bank.html">Bank</a></li> </ul> </li> <li><a href="mbindex.html"><img src="/images/icons/comments.png" border="0">Interact</a> <ul> <li><a href="mbindex.html">Forum</a></li> <li><a href="chat.html">Chatroom</a></li> <li><a href="championshipboard.html">Championships</a></li> <li><a href="onlineusers.html">Online Players</a></li> <li><a href="http://www.paradigmprogrammingllc.com/community/">Community</a></li> </ul> </li> <li><a href="referrals.html"><img src="/images/icons/magnifier.png" border="0">Other</a> <ul> <li><a href="referrals.html">Referrals</a></li> <li><a href="search.html">Search AA</a></li> <li><a href="item_submission.html">Submit Image</a></li> <li><a href="goals.html">Goals</a></li> <li><a href="http://www.rpg.sg/vote.php?id=62">Vote for AA</a></li> </ul> </li> <li><a href="rules.html"><img src="/images/icons/shield.png" border="0">Help</a> <ul> <li><a href="rules.html">Rules</a></li> <li><a href="htmlhelper.html">HTML Helper</a></li> <li><a href="mods.html">Moderators</a></li> <li><a href="privacy.html">Privacy Policy</a></li> <li><a href="tos.html">Terms of Service</a></li> </ul> </li> <li><a href="userarea.html"><img src="/images/icons/newspaper.png" border="0">News</a> </li> <li><a href="upgrade.html"><img src="/images/icons/arrow_up.png" border="0">Upgrade</a> </li> </ul> Alright, so in the site I am designing, I have underline images (lines that are a bit longer then a typical underline). I am placing them directly under the text they are related to. All of the placement of text and the images is done using absolute positioning in CSS (this is done inside a div tag that is positioned relatively, so absolute positioning works properly). Anyways, this is the problem I am having, the underline image looks great in Firefox, and then in IE it is about 10px or so lower then it should be and it doesn't look near as good, so I was wondering if there is some problem in my code that I should correct. Anyways, here are some images to help describe the problem and the code that relates to this. This is what I want: This is what I get in IE This is the HTML for the placement Code:
<div id = "news">
<div id = "title">
<span class = "title">Latest News</span>
</div>
<div id = "news_underline">
<img src = "/testing/inertia/news_underline.JPG" alt = "Latest News" />
</div>
</div>
This is the CSS for "news" Code:
#news
{
position: absolute;
top: 5px;
left: 415px;
width: 185px;
height: 275px;
background-color: #519dbd;
background-image: url(/testing/inertia/news_gradient.jpg);
background-repeat: repeat-x;
border-bottom: #0e1f29 medium solid;
border-right: #0e1f29 medium solid;
}
And the code for "news_underline" Code:
#news_underline
{
position: absolute;
top: 25px;
left: 30px;
width: 122px;
height: 2px;
}
And the code of the div that these are both inside of Code:
#main
{
width: 608px;
height: 500px;
position: relative;
background-image: url(/testing/inertia/blue_gradient.jpg);
background-repeat: repeat-x;
background-color: #14495b;
margin-right: auto;
margin-left: auto;
}
Hi, I'm having an interesting problem. I have a left floated containing div and then a right floated containing div to split multiple contents between the left and right side of a popup window. It works great in IE 7, Chrome, FF3, but for some reason not in FF2. In FF2, it forces the contents of the right floated containing div below the left floated div (instead of beside it) and makes it's width the entire width of the popup. Any idea why? (there is a reason I had to put all the css directly in the code - normally it's separated) Here's the code: Code:
<div style='padding: 15px; text-align: left;'>
<div style='float: left;'>
<table style='margin-top:16px; font-size: 12px; font-family: Verdana,Arial,sans-serif;'>
<tr>
<td>Name:</td><td colspan='2'><input id='popupName' name='popupName' style='float:left' type='text'></td>
</tr>
<tr>
<td style='padding:5px 0 17px 0;'>Type:</td><td style='padding:5px 0 17px 0;' colspan='2'><select id='popupType' name='popupType' style='float:left; width: 148px; height: 21px' ></select></td>
</tr>
<tr>
<td style='padding-bottom: 14px;' colspan='3'><div style='width: 280px'>This is some text.</div></td>
</tr>
<tr>
<td style='padding-bottom: 5px;'>Group Title:</td><td style='padding-bottom: 5px;'><input id='popupGroupTitle' name='popupGroupTitle' style='float:left' type='text'></td><td></td>
</tr>
<tr>
<td>Titles:</td><td><input id='popupTitles' name='popupTitles' style='float:left' type='text'></td><td><input style='float:left; padding: 0;' type='button' value='Add >>' onclick=\"addToList()\"></td>
</tr>
</table>
</div>
<div style='float: right;'>
<div style='margin-bottom:5px;'>Element Titles:</div>
<select id='newOptionSelect' style='float:right; width: 247px;' size='12'></select>
<input id='popupDeleteBtn' style=\"clear: right; background: rgb(190,190,190) url('/url') no-repeat center center; float:right; margin: 5px 2px;\" type='button' onclick='removeFromList(\"newOptionSelect\", newOptionArray)'/>
<input id='popupMoveDownBtn' style=\"float:right; background: rgb(190,190,190) url('/url') no-repeat center center; margin: 5px 2px;\" type='button' onclick='moveDown(\"newOptionSelect\", newOptionArray)'/>
<input id='popupMoveUpBtn' style=\"background: rgb(190,190,190) url('/url') no-repeat center center; float:right; margin: 5px 2px;\" type='button' onclick='moveUp(\"newOptionSelect\", newOptionArray)'/>
</div>
</div>
</div>
one line of text isn't in the position that i want it to be for ff and ie. Chrome is able to read the css code: chrome: Code: p1 {
line-height: 1.3em;
font-size: 1.2em;
font-weight: bold;
display: block;
-webkit-margin-befo 5.4em;
-webkit-margin-after: 1em;
-webkit-margin-start: 220px;
-webkit-margin-end: 0px;
}
ff,ie: p1{ line-height: 1.3em; font-size: 1.2em; font-weight: bold; } I want the " learning from questions" at the bottom right of the logo. Thanks for helping! site link: http://www.nyitforums.com/ I have a very simple drop down menu that I'm playing around with and trying to make cross-browser. The drop-down currently looks OK in Mozilla/Firefox. Presently, it does not work in either IE 6 or IE 7. You can see the drop down HERE I have noticed that when you alter the URL in this line of code, inside the href attribute (for example): Code: <li><a href="">Computer Hardware (1)</a></li> ...sometimes the menu will work (or break) in ANY given browser (IE or Mozilla)... Try substituting different values for the href attribute inside the link. Depending on the href value, sometimes the code works, and sometimes it doesn;t (in either IE or Mozilla). Something screwy is going on with the href attribute, but I can;t tell what it is. Any help is appreciated. |
|||||||