|
CSS - Td Styles Behaving Strangely
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! Similar TutorialsI 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. 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! Hi, I'm running into a bit of a problem making the entire page fit into a DIV. I can't see any reason why it won't, because as far as I know my div's are in the right place, and in the right file (because the effect is half-there. Here's my code: CSS Code:
html {
scrollbar-face-color: #ADDFE7;
scrollbar-highlight-color: #ADDFE7;
scrollbar-3dlight-color: #ADDFE7;
scrollbar-darkshadow-color: #ADDFE7;
scrollbar-shadow-color: #ADDFE7;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #ADDFE7;
overflow:hidden;
}
body {
background: #FEFFED;
font-family: 'Verdana', 'Arial', sans-serif;
font-size: 10px;
color: #000000;
cursor:default;
margin: 0; padding: 0;
overflow:hidden;
}
div.center {
/* Make element float in the center */
position: absolute;
left: 50%;
top: 50%;
/* Set the width and height */
width: 750px;
height: 410px;
/* Set margin to half the values of width/height */
margin-left: -375px;
margin-top: -205px;
}
div.rect {
background: #ADDFE7;
padding: 0px;
width: 750px;
height: 410px;
overflow:auto;
border: 1px solid #000000;
z-index: 1;
}
Now what we're concerned about there (the ones I added) are the 'center' div , and 'rect' div. They're near the top. and this is a 'View source' to show where I put the code: 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" dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>form one : shop</title>
<meta name="keywords" content="form one, merchandise, t-shirts, cds Congratulations! You have successfully installed your Zen Cart™ E-Commerce Solution." />
<meta name="description" content="form one : shop : Congratulations! You have successfully installed your Zen Cart™ E-Commerce Solution. - form one, merchandise, t-shirts, cds" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="authors" content="The Zen Cart™ Team and others" />
<meta name="generator" content="shopping cart program by Zen Cart™, http://www.zen-cart.com" />
<base href="http://formone.net/shop/" />
<link rel="stylesheet" type="text/css" href="includes/templates/perry/css/stylesheet.css" /></head><body id="index">
<div class="center">
<div class="rect">
<table class="centershop" border="0" cellspacing="0" cellpadding="0">
<tr><td>
<table border="0" cellspacing="0" cellpadding="0" class="headerNavigation" align="center">
<tr class="headerNavigation">
<td align="left" valign="top" width="33%" class="headerNavigation">
<a href="http://formone.net/shop/index.php?main_page=index">Home</a> |
<a href="http://formone.net/shop/index.php?main_page=login">Log In</a>
</td>
<td align="center" width="25%"></td>
<td class="headerNavigation" align="right" valign="top" width="33%">
</td>
</tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0" class="header">
<tr><!-- All HEADER_ definitions in the columns below are defined in includes/languages/english.php //-->
<td valign="middle" height="23px" width="200px">
<a href="http://formone.net/shop/index.php?main_page=index"><img src="includes/templates/perry/images/logo.gif" border="0" alt="Powered by Zen Cart :: The Art of E-Commerce" title=" Powered by Zen Cart :: The Art of E-Commerce " width="192" height="64" /></a> </td>
<td align="center" valign="top">
</td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" class="main_page">
<tr>
<td valign="top" class="column_left"><table border="0" width="150px" cellspacing="0" cellpadding="0" class="column_left"><tr><td>
<!--// bof: categories //-->
<table width="150px" border="0" cellspacing="0" cellpadding="0" class="leftbox" id="categories-table">
<tr class="leftboxheading" id="categories-heading-tr">
<!-- Sidebox Header -->
<td colspan="3" width="100%" class="leftboxheading" id="categories-heading-td">Categories</td>
</tr>
<tr>
<!-- Sidebox Contents -->
<td colspan="3" class="leftboxcontent" id="categories-content">
<br /><img src="includes/templates/perry/images/pixel_silver.gif" border="0" alt="" width="100%" height="1" /><br /><a class="category-links" href="http://formone.net/shop/index.php?main_page=products_all">All Products ...</a> </td>
</tr>
<tr>
<!-- Sidebox Footer -->
<td colspan="3" height="5px" class="leftboxfooter" id="categories-footer">
</td>
</tr>
</table>
<!--// eof: categories //-->
</td></tr></table></td>
<td valign="top" class="center_column" width="100%"> <table border="0" width="100%" cellspacing="2" cellpadding="2">
<tr>
<td class="pageHeading"><h1>Congratulations! You have successfully installed your Zen Cart™ E-Commerce Solution.</h1></td>
</tr>
<tr>
<td class="greetUser">Welcome <span class="greetUser">Guest!</span> Would you like to <a href="http://formone.net/shop/index.php?main_page=login">log yourself in</a>?</td>
</tr>
<tr>
<td class="main">This is the main define statement for the page for english when no template defined file exists. It is located in: <strong>/includes/languages/english/index.php</strong></td>
</tr>
<tr>
<td class="plainBox">Define your main Index page copy here.</td>
</tr>
<tr>
<td class="plainBox"><p><strong><font face="verdana,arial,helvetica,sans-serif" color="#006600">Main Page Sample Text ...</font></strong></p><p>This section of text is from the Define Pages Editor located under Tools in the Admin.</p><p>It is different from the /includes/languages/english/xxxxxx.php definitions.</p><p>You can use one or the other seperately for this page or, you can use both together.</p><p>To remove the language file definition, do not delete the define statement, set it to be blank. Example: define('TEXT_INFORMATION', '');</p><p>To remove this section of the text, delete it from the Define Pages Editor located under Tools in the Admin.</p><br /></td>
</tr>
</table><br />
</td>
<td valign="top" class="column_right"><table border="0" width="150px" cellspacing="0" cellpadding="0" class="column_right"><tr><td>
</td></tr></table></td>
</tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr class="footertop">
<td class="footertop" align="center"> | <a href="http://formone.net/shop/index.php?main_page=index">Home</a> | </td>
</tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0" class="footer">
<tr>
<td class="footerbottom">Your IP Address is: 69.159.1.195</td>
</tr>
<tr>
<td class="footerbottom"></td>
</tr>
</table>
</td></tr>
<tr>
<td align="center"><div>Parse Time: 0.150 - Number of Queries: 43 - Query Time: 0.012168360336304</div></td>
</tr>
</table></div>
</div>
</body></html>
They're right after the <body> and right before the </body> tag, so I don't know why the whole page isn't fitting in my box. It sort of is working, because it's centered vertically and horizontally, and positioned where it's supposed to be. But it overflows out under the box it's supposed to be in. Does anyone know why this is happening? If you want to see what it is doing right now, it's http://www.formone.net/shop . I've got a problem with a site I'm developing. I want to repeat-x a body background pattern, but the problem is that it overlays another version of itself just where my container div starts. Anyone know what's going on here? Code: html, body{
background-color:#AFC4E2;
background-image:url(bgmew.jpg);background-position: top center;
background-repeat:repeat-x;
color:#234;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:100%;
text-align:center;
}
a{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:90%;
color:#678;
text-decoration:none;
font-weight:bold;
background:inherit;
}
a:hover, a:active{text-decoration:underline;}
p{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:90%;
font-weight:normal;
color:#234;
background:inherit;
}
#container{
width:760px;
height:auto;
background-color:#FFFFFF;
color:#234;
border:2px solid #999;
padding:10px;
margin: 50px auto;
text-align:left;
}
ajarnforumDOTnet/erwinsample/ Thanks for any help you can give me. I've got a problem with a site I'm developing. I want to repeat-x a body background pattern, but the problem is that it overlays another version of itself just where my container div starts. Anyone know what's going on here? Code: html, body{
background-color:#AFC4E2;
background-image:url(bgmew.jpg);background-position: top center;
background-repeat:repeat-x;
color:#234;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:100%;
text-align:center;
}
a{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:90%;
color:#678;
text-decoration:none;
font-weight:bold;
background:inherit;
}
a:hover, a:active{text-decoration:underline;}
p{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:90%;
font-weight:normal;
color:#234;
background:inherit;
}
#container{
width:760px;
height:auto;
background-color:#FFFFFF;
color:#234;
border:2px solid #999;
padding:10px;
margin: 50px auto;
text-align:left;
}
(URL address blocked: See forum rules)/erwinsample/ Thanks for any help you can give me. I just can't seem to figure this out! it is driving me nuts! The page I am working on is he http://www.iskippedlunch.com/z_test/index_2.php and the style sheet is he http://www.iskippedlunch.com/z_test/styles/shfb_basic.css I am using php to import sections into the page. For some reason when I include the Client Story (blue) section on the homepage all the content in the green sidebar gets pushed way down the page in a couple versions of IE6. I have narrowed the problem down to this area of code, it is the only part that makes the page go wonky. I even rewrote the CSS, but I must be missing something. The lower levels of the site are based on this home page, and have the same problem if the main (white) content is long. You can see how some have the problem and some display correctly. Help will be greatly appreciated, my eyes are getting crossed! PS, on some of the lower level pages, the (orange)footer background creeps up the page! This is new! Anyone know how to fix the bottom bars width? Page he http://www.milztech.net/ Cheers! 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 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;
}
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'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;} 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 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;
}
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/ 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>
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! Hi 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 (: Hi I have this small problem with one of my sites when viewed in IE *surprise surprise* Let's say I have a div called "foo". I specify a width and set a padding of 10px. Code:
<style>
.foo {
width: 100px;
padding: 10px;
}
</style>
<div class="foo">Bar</div>
Firefox, Opera and Mozilla interprets this as an element which's "text area" is 100px and there's an additional 10px on both sides. So the actual width of the div is 120px. IE doesn't interpret it like that. If I set widht=100px, then the actual width is 100px regardless if I have paddings or not. Now these different types of interprations are causing me a head ache. Is there any "trick" to make the div to be equally wide in all browsers? If not, I guess the only option is to use tables - Kimppa I'd like to seperate blocks of text with a horazontal rule. I'd like it to be dashed. So, I've come up with this: Quote: hr { border: none 0; border-top: 1px dashed #000; width:98%; height: 1px } However, although this works well in IE, it Firefox there is too much space between the HR and the text block under it. In other words, the text above the HR comes right up to the line, but the text under the line, there is a larger gap. Any way to close the gap? Any ideas? |
|||||||