|
CSS - Flash Banner Showing A White Line In Os X
Similar TutorialsHi, I need to add some content (small div) over the top of a flash banner. I tried adding wmode="transparent" to both the object and embed tag but that didnt work. Any other suggestions? thanks Hi, in the following URL: http://www.dudley.nhs.uk/sites/moss...dex.asp?id=2837 in the bottom left/right, there seems to be a hite section still showing. If you look at the source code, I've added: PHP Code: <style type="text/css"> <!-- body,html,ul,#navcontainer,#navlist,#left,#right,#container,#theContent { background-color: #ffc; } --> </style> So that the background should be that ghastly yellow colour but nothing seems to be working! Looks like it's down to the #left and #right tags. Please can anyone help! Thanks, Janusz http://www.concrete-creative.com/sharecipe/findfriends.html The dropdown menus don't always show the bottom horizontal line... I see them on all major browsers, but my friend is using an older version of FF and doesn't see the line on the Friend's dropdown (she's using 2.0.0.02 and I'm using 3.0.5). I cannot replicate the bug and I've gone thru all the code and don't understand why it wouldn't show on ONE dropdown, but does on another - with the exact same code. Can anyone see what I might be missing?! The CSS can be viewed he http://www.concrete-creative.com/sharecipe/sharecipe.css (scroll down to /* Navigation */ to see the styles for the menus) THANKS for any input! Please look at this page http://www.tmhdesign3.com and this one http://www.tmhdesign3.com/real-estate-broker.asp The first one used a flash file, the second does not. On the first page I want the dropdown navigation to overlay on the flash but it does not. I played with z-index to no success... Hi, I had this working but somehow it's not working again. The problem I am having is that scroll bars are showing up in my iframe in Firefox, Opera, and Safari, but not IE7 and IE6. Here is the link: http://www.caillouette.com/NewCatsMeow/ I know I need to tighten up my style sheet, but if someone could tell me how to solve this, I would be very happy. Here's the iframe code in the index page: Code: <div id="bodyInfo"> <iframe name="mainBody" width="770" height="602" src ="body.html" scrollbars="NO" border="0"> </iframe> <!-- end #bodyInfo --></div> Greetings, I am relatively new to CSS and am using background image bullets. Problem is, in the case of a two line link, the bullet aligns in between the two lines and I need it to align to the top line. Below is the CSS, and attached is a screenshot of the link to better illustrate my predicament. Thanks for any help! li { list-style-type: none; background: url(../images/bullet.gif) no-repeat left; padding: 0 0 0 10px; } I've got two lines of text. Want the spacing the two lines to increase, so I set a line-height. When I do this, not only does it increase space between the two lines, it also increases spacing above the first line (and maybe below the second). How can I increase spacing between the two lines only, without increasing above and below? Thanks! Greetings, I have a class called "header" and I am trying to give it a touch of extra space between it and the next line. All of my headers are just a few words and thus on one line. I tried placing "line-height: 1.5em" in my "header" class and it shows up correctly in Dreamweaver but not in IE. My thought is, because it is only a single line, that class value does not kick in because there is no second line for that class. Is there a way to conrol this in CSS or am I going to have to resort to using a....gulp.....spacer? Thanks in advance! Hi, I'm working on a site in Css and it all works fine in Firefox. But in IE7 there is a lot of extra white space between elements like after the h2 heads. Anyone know what i'm doing wrong? Here's the code. CSS Code:
body {
background: #1d1d1d url(../g/header_bg.gif);
background-repeat: repeat-x;
margin: 0px;
padding: 0px;
font-family:arial;
font-size:11px;
line-height:1;
font-weight: normal;
text-decoration: none;
color:#575859;
text-align: left;
}
#container {
width: 992px;
margin: 0px auto;
text-align: left;
}
ul {
list-style:none;
padding: 0px;
margin: 0px;
}
input, textarea{
font-family:Tahoma;
font-size:11px;
color:#000000;
vertical-align:middle;
font-weight:normal;
background:#FFFFFF;
text-align:left;
}
.formfield {
width:271px;
height:auto;
color:#000000;
background-color:#FFFFFF;
height:18px;
margin-right:8px;
border: solid 1px #404040;
}
#header {
height: 63px;
}
.menu {
float:left;
padding-top:25px;
}
.menu li {
background:url("../g/menu_sep.gif") right 3px no-repeat;
padding:0px 10px 0px 15px;
float:left;
}
.menu li a {
background:url("../g/menu_arrow.gif") 0 6px no-repeat;
color:#181818; font-weight:bold;
padding:0px 10px 0px 15px;
text-decoration:none;
}
.menu li a:hover {
text-decoration:underline;
}
.search {
float:right;
background:url("../g/search_bg.gif") 0 0 no-repeat;
width:357px;
height:43px;
padding:12px 0px 0px 10px;
margin-top:10px;
}
h1.logo {
width: 203px;
height: 109px;
background: url("../g/title.gif");
text-indent: -9999px;
margin-left: 10px;
}
#left_container {
float: left;
width: 200px;
background-color:#000000;
margin-right: 20px;
margin-left: 10px;
}
#middle_container {
float: left;
}
#right_container {
float: right;
}
.left_top {
width:200px;
height:12px;
font-size:0em;
background:url("../g/left_top_bg.gif");
}
.left_bottom {
width:200px;
height:12px;
font-size:0em;
background:url("../g/left_bottom_bg.gif");
}
#left_container h2 {
font-size:1.01em;
line-height:1.5;
color:#85B102;
font-weight:bold;
text-transform:uppercase;
padding:0px 0 10px 0;
margin-left:20px;
}
#left_container ul { margin-left:20px;}
#left_container li { font-size:1.01em; line-height:1.5em; color:#707070;}
#left_container li a { font-size:1.01em; line-height:1.5em; color:#707070; text-decoration:none; background:url("../g/arrow.gif") no-repeat 0px 6px; padding:0 0 0 19px;}
#left_container li a:hover { text-decoration:underline;}
HTML Code: <html>
<head>
<title>Test</title>
<link type="text/css" href="x/style.css" rel="stylesheet"/>
</head>
<body>
<div id="container">
<div id="header">
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Test2</a></li>
<li><a href="#">Test3</a></li>
<li><a href="#">Test4</a></li>
</ul>
</div>
<div class="search">
<form method="get" action="search.php">
<input type="text" class="formfield" value=""><input class="submit" type="image" src="g/search.gif" value="submit">
</form>
</div>
</div>
<h1 class="logo">MyTitle</h1>
<div id="left_container">
<div class="left_top"></div>
<h2>Menu</h2>
<ul>
<li><a href="#" title="home">Home</a></li>
<li><a href="#" title="home">Test2</a></li>
<li><a href="#" title="home">Test3</a></li>
<li><a href="#" title="home">Test4</a></li>
<li><a href="#" title="home">Test5</a></li>
<li><a href="#" title="home">Test6</a></li>
<li><a href="#" title="home">Test7</a></li>
</ul>
<div class="left_bottom"></div>
</div>
<div id="middle_container">
b
</div>
<div id="right_container">
c
</div>
</div>
</body>
</html>
Ok guys, I'm hoping someone can help me. I am a complete newbie to CSS and web site construction in general. I have a left vertical navigation bar made up of graphics in a div tag that is set to float on the left. I'm having difficulty with the graphics, they have white spaces in between them when viewed in IE. They are supposed to butt up against one another. I have tried setting the margin and padding in that div to 0. I have also seen in other forums where the <li> tag can be placed on the previous line to fix this problem in IE. I haven't even viewed the page on any other browsers yet, can someone help me please? Thanks so much! vonatah Hi; I am trying to get rid off white space from the bottom of the navigate bar, and tried with height=23px for th or td, but they don't not work, could anyone help me, please. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Yourheadstone.com</title>
<style type="text/css">
html head title{
border:0;
padding:0;
margin:0;
}
body{
padding:0;
border:0;
background-color:#3399FF;
margin:0;
}
table tr td{
border: 1px solid #000000;
}
table{
width:1024px;
height:25px;
padding:0;
border:2px solid #000000;
margin-top:5%;
margin-right:auto;
margin-bottom:auto;
margin-left:auto;
background-color: #E5FFFF;
}
tr td{
padding:0;
margin:0;
}
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
#nav li {
float: right;
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc;
}
#nav li a:hover {
color: #c00;
background-color: #fff; }
</style>
</head>
<body>
<table>
<tr>
<td>
<ul id="nav">
<li><a href="#">About Us</a></li>
<li><a href="uploadform.php">FAQs</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Headstones</a></li>
<li><a href="#">Home</a></li>
</ul>
</td>
</tr>
</table>
</body>
</html>
I have layed out the page but cannot seem to get the hang of the floats and positioning....!! If anyone can give me a hint how I can position my text in the main white space I would be so grateful as I am confusing myself as to what i am doing wrong!! the site is hosted at www dot getatrader dot com PLEASE HELP!! here is the CSS: Code:
body {
background: white;
font-size: smaller;
font-weight: bold;
font-family: Verdana,Arial,Helvetica,sans-serif;
}
#topnav {
float:left;
position: absolute;
}
#topnav img{
display: block;
border: none;
}
#header{
position: relative;
text-align: right;
border: solid thin #999999;
margin: 0px 0px 0px 0px;
background: #336699;
font-family: Verdana,Arial,Helvetica,sans-serif;
color: #ffffff;
height: 155px;
}
#headerright{
position: relative;
top: 20px;
right: 10px;
}
#headerright li {
display: inline;
list-style: none;
padding: 40px;
}
#headerright img {
border: none;
}
#headerright a:link {
color: #ffffff;
text-decoration: none;
}
#headerright a:visited {
color: #ffffff;
text-decoration: none;
}
#headerright a:hover {
color: #ffffff;
text-decoration: none;
}
#headerright a:active {
color: #ffffff;
text-decoration: none;
}
h1 {
}
h2 {
width: 200px;
text-align: center;
color: white;
background-color: black;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: large;
font-weight: bold;
}
#container {
width: 956px;
padding: 10px;
margin: 0px auto 0px auto;
height: auto;
text-align: left;
border: 1px solid #ddd;
}
#button {
position: relative;
display: block;
width: 152px;
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: Verdana,Arial,Helvetica,sans-serif;
background-color: #336699;
color: #333;
}
#button ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
height: 500px;
}
#button li {
border-bottom: 1px solid #90bade;
margin: 0;
}
#button li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}
html>body #button li a {
width: auto;
}
#button li a:hover {
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}
#maintext {
position: absolute;
float: left;
}
#footer
{
color: white;
background-color:#336699;
font-size: small;
font-family: Verdana,Arial,Helvetica,sans-serif;
margin: 0px 0px 0px 0px;
}
hmm i cant get this to work... i have the left side of the banner that needs to be expandable wich is a long picture.....and the right side is 10px wide. how can i get this 2 in a div wich get width by % and center aligned on the page? and also on a layer above other stuff Hi and thank you in advance for any advice or help. my website: http://earlystartdc.com/ Im having trouble trying to find the right css code so that i can adjust the banner underneath the menu in order to remove the white spaces in the module. I would like for the banner to be at margin 0 so that its all the way to the top without any white space in between. any help?? Thank you P.s - This is what my css files look like from my template/css folder . Hi there, I have the following in my css file: } #headerBannerWrapper { background-image: url(/GREENLOGO.jpg); background-position: bottom left; background-repeat: no-repeat; background-color: #DEF2B0; padding: 0px; margin: 0px; } #headerBannerWrapper img { padding: 0px; margin: 0px; vertical-align: bottom; However the banner doesn't get rendered in IE7. It renders OK in IE8 Any help most appreciated. The above is linked to the following class: .clearFix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; NB If the banner has content inside then it renders OK, however if there is no contents inside then the banner (green background) is not displayed. I'm trying to figure out a way to create a banner across the top that consists of an image, but whose right edge extends all the way to the right edge of the browser -- regardless of the window size. At the same time, I need to do the same thing with the left column: fill it with an image whose bottom edge extends all the way to the bottom of the window. I can do this with tables, but can't figure out a cross-browser way to do it in CSS. The "stretchy" right edge of the banner is simply a 1 pixel wide slice of the banner's right edge, repeated as necessary. Similarly, the "stretchy" bottom of the left column is a 1 pixel slice of the bottom of the column's image. I can't get these to appear in Mozilla. Here's my code: Styles.css: PHP Code: .banner { background-image:url(./images/banner-fill.gif); width:100%; } .nav { background-image:url(./images/nav-fill.gif); width:104px; height:100%; } .content { position:absolute; left:140px; top:140px; } Template.htm: PHP Code: <html> <head> <title>Template</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="css/styles.css"> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="height:100%;width:100%"> <div class="banner"><img src="images/banner.jpg" width="800" height="134" border="0"></div> <div class="nav"><img src="images/nav.jpg" width="104" height="327" border="0"></div> <div class="content"> <p>Page Content</p> </div> </body> </html> As a way to learn XHTML-Strict/CSS, I'm making a funny site with the goal of recruiting new people to be my friend. However, I can't seem to get rid of a horizontal bar of white space between the Title div and News & Content divs. I could fix it by making the News and Content positions absolute, but then I'd be unable to have a footer. Does anybody know why that white space exists, or better yet, how I can get rid of it? Site is http://www.kennygraham.net/index.html and CSS is http://www.kennygraham.net/perfect.css Thanks in advance to anyone who can help. Does anyone know how to assure that checkboxes and their labels stay together? My situtation: I have several rows, each with several checkboxes. I want to assure that if a line wraps, each checkbox stays with its label (either each stay on the same line, or each move to the next, but never leave checkbox on one line and label on the next). I have tried several varients on: <span style= "whitespace: nowrap;". .... checkbox and label description... </span> or <label style= "whitespace: nowrap;". .... checkbox and label description... </label> even used both... have also tried a non-breaking space between label and checkbox control. <span> works on mac with Netscape, IE, Opera or Safari ... but alas it does not work on windows with IE 5.5 [unfortunately it acts as if 'nowrap' applies to the whole line, forcing viewers to scroll right to see all options] I can find documentation that says "white-space" can apply to <span> or <label>, and also documentation that says it can't. I guess the latter could explain the problem. But does anyone know how to keep the label and checkbox together thanx |
|||||||