|
CSS - Ie Showing An Annoying Whitespace Behind Image.
Hey everyone,
I am making a design for my site, and when I use a rounded image for my background, IE shows a whitespace around it. Here is my code. Code:
#menu_outer {
background-image: url( menu1.png );
background-position: top left;
background-color: #0000000;
width: 250px;
}
Here is an example. Any suggestions? Similar TutorialsI'm doing a new site with a 3col centered layout. On my left col i have 8 or 9 divs with an image in them. In IE it looks as desired but in *.MOZ browsers there is 2 or 3 pixels of space between each image. Applying a bottom border to the image's containing div it shows the space is within the div and not between the divs. Here is the Code Code:
CSS
.left {
float:left;
position: relative; /*** IE needs this or the contents won't show outside the parent container. ***/
width: 177px; /*** Critical left col/divider dimension value ***/
margin-left: -176px; /*** Critical left col/divider dimension value ***/
}
*>html .left {width:176px;} /*** Fix only for IE/Mac ***/
.container-left {
width: 175px; /*** Critical left col dimension value ***/
padding-bottom: 110px; /*** To keep content from going underneath the AP bottom boxes ***/
}
.menu-main{
margin-left:1px;
border-bottom:1px solid black;
}
XHTML
<div class="left">
<div class="container-left">
<div class="menu-main"><img src="images/home_off.jpg" /></div>
<div class="menu-main"><img src="images/awards_off.jpg" /></div>
<div class="menu-main"><img src="images/designawards_off.jpg" /></div>
<div class="menu-main"><img src="images/membership_off.jpg" /></div>
<div class="menu-main"><img src="images/crewtraining_off.jpg" /></div>
<div class="menu-main"><img src="images/events_off.jpg" /></div>
<div class="menu-main"><img src="images/newsletter_off.jpg" /></div>
<div class="menu-main"><img src="images/pressreleases_off.jpg" /></div>
<div class="menu-main"><img src="images/contactus_off.jpg" /></div>
</div>
</div> <!-- end left div -->
Any suggestions? The images are all 174px in width Some css tags have inherent "stuff" attached to them. I don't know all the ins and outs (getting closer), and I've run into one I need help with. Here's the site: http://www.carriagedriving.net/article.php Here's the div css: Code:
#logo {
float:left;
margin: 0px;
padding: 0px;
}
.Alogo {
width:250px;
height:150px;
/*border:1px dashed gray;*/
}
The coding in the div is an php include which results in this (banner image and alt text changes each time the page is rebuilt/refreshed): Code: <div id='logo' class='Alogo'><p align=center><a href="http://www.vermontel.com/~greenall/" target=_blank><IMG SRC="pageads/greenall.jpg" BORDER=0 alt="Greenall Carriage House"></a> </div> I get about 12 pixels of white space over the top of the image in both Firefox AND IE, so it's gotta be an inherent property to the link. Sans the link, there's no whitespace above the image. How do I "fix" this? Thanks. HeadElf I am really stumped -- I need to stack images on top of one another using an unordered list but I get a few pixels of whitespace at the bottom no matter what I do. I know this could be acheived using divs instead but I would like to figure it out using lists. I broke the code into as simple a form as possible and put it below. Removing everything between the </li> tag and the next <li> tag does not work. I tried adding "height: 20px;" under "#nav ul li" to force the images to stack on top of each other -- this works in Safari and Firefox but not in IE Windows. If I remove the DocType tag or switch it to xhtml transitional the images do stack in Safari but not in Firefox or IE. Am I missing something here or is this just not possible? Appreciate any help. The code: 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>
<title>css list test</title>
<style type="text/css" media="screen">
img {
border: 0;
}
#nav {
padding: 0;
margin: 0;
}
#nav ul {
padding: 0;
margin: 0;
list-style-type: none;
}
#nav ul li {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><img src="http://test.mightylab.com/images/colors/blue.jpg" width="40" height="20" /></li>
<li><img src="http://test.mightylab.com/images/colors/yellow.jpg" width="40" height="20" /></li>
<li><img src="http://test.mightylab.com/images/colors/red.jpg" width="40" height="20" /></li>
</ul>
</div>
</body>
</html>
I have an image in div that is on z-index layer. I did this to avoid cutting it up in smaller images. I finally got it to position correctly in my layout, now it won't show in FF. here is a link to the page in progress: http://www.rustbug.com/the19thhole/index.html Any suggestions? Hi everyone, I have a design I am working on a design, which has a image for a background, well the image does not show, I am not sure why, it just shows white text. Anyway here is my code. Code: #logo{
background-image: url('logo.png');
background-repeat: no-repeat;
}
#logo .text{
letter-spacing: -0.1em;
font-weight: bold;
font-size: 21px;
text-align: left;
color: #FFFFFF;
}
That does not work, however, this does. Code: <img src="logo.png" alt="Logo" /> Any suggestions? The only way i can get my backgroud image to show is to explicitly state my body elements within each document. If I put them in css file and refer each page to that css file, my background image does not work, but all the other elements in that css file do. Why? JOhn I am having trouble with my CSS mouse over links. XHTML and CSS3 both validate. However the large image for the mouse over isn't showing. I have check everything I can think of and still am totally unable to figure it out. It has been years since I have built a web page and am trying again so this site has not been published as of yet but is still accessible to look at. Below is the link to my site and the external CSS style sheet. I also have CSS code on the XHTML page as well. Could someone please take a look and see what I am over looking? Thank You Selena I made a mistake.. I'm not a student. simplyselena.com and external style is simplyselena.com/css/styles.css Sorry the above is the only way I could put url in not allowed to post url's as I am a new user account. I'm using the "hacked" version IE6 since I have IE7 installed. I designed a web page with a really strange problem. I've created a "div popup" that shows an image and some text when you click on a link but the image doesn't appear in IE6 until you right click and choose "show picture". And even then, the combo box in the background still shines through. Any suggestions? wwwDOTstoneycreekrentalsDOTcomSLASHequipmentDOTasp (Then search for dozers) Here's the CSS I'm using: Code:
div#popup {
background-color: black;
color:white;
display:none;
font-size:small;
margin-left: auto;
margin-right: auto;
padding:5px;
position:absolute;
text-align:center;
width:736px;
z-index:1;
}
And my javascript: Code:
<script type="text/javascript">
function popupDiv(str){
var popup = document.getElementById('popup');
popup.style.display='block';
popup.style.top=27+'px';
popup.style.zIndex=1002;
popup.innerHTML = str + '<br /><a href="javascript:void(0)" onClick="document.getElementById(\'popup\').style.display=\'none\'">Close</a>';
}
</script>
I'm working on a website that I'm having issues with in the CSS. I'm fairly new to CSS and I don't know how to get an image banner to show up next to each other. I though with the css in place I could do that, but some how I'm missing where the nav drops down in to the next div which is suppose to be a slideshow type div. The page is at ukindesigns.com/EBB/ebb.html and the style sheet can be found at ukindesigns.com/EBB/CSS/style.css Thanks, Franky For some reason no matter how I structure the code, I cannot get a background image to show up and I'm not sure why. Here is my current code:
Code: background: #cccccc url(/dir/bg.png) repeat-y; I've checked multiple sites just to verify that my code is correct, and it is. I've also tried the code another way: Code: background-color: #cccccc; background-image: url(/dir/bg.png); background-repeat: repeat-y; The image is uploaded to the correct directory as well. Any ideas? I have an image gallery, that when the thumbnail is hovered over a larger image appears. This works fine in Firefox and IE but not in Safari. I have validated my code and css. The gallery is at http://www.briandobson.com.au/sthaust.html Code:
<tr>
<td valign="top">Boat Harbour, Goolwa<br />
75 x 35cm <br />
$720</td>
<td valign="top"> </td>
<td>
<a class="thumbnail" href="#"><img src="SthAust/thumbs/Boat-Harbour---Goolwa.jpg" alt="Boat Harbour, Goolwa" width="200" height="46" />
<span>
<img src="SthAust/Boat-Harbour---Goolwa.jpg" alt="Boat Harbour, Goolwa" width="775" height="248" />
</span>
</a>
</td>
</tr>
CSS is in the head and separate styles.css Code: .thumbnail img {
border: 1px solid white;
}
.thumbnail:hover {
background-color: transparent;
float: left;
}
.thumbnail:hover img {
border: 1px solid white;
}
.thumbnail span {
position: absolute;
background-color: white;
padding: 1px;
left: -1000px;
border: 1px solid black;
visibility: hidden;
color: black;
text-decoration: none;
display: block;
}
.thumbnail span img {
border-width: 1px;
}
.thumbnail:hover span {
visibility: visible;
background: top;
left: 0px;
z-index: 50;
}
With thanks Angela hello. this has us stumped. here is the page: http://www.praxishosting.com/dev/csstest/testindex.htm it looks fine in IE, but in firefox, the div tag containing the background image does not appear to be expanding as the content grows. thus in firefox, you cannot see the background image in the bottom left hand cell (the only place it shows through). any suggestions? the style code for the background container is rather simple: Code:
#container {
width: 750px;
background: url(../media/bkgrd.gif) repeat fixed center top;
margin-right: auto;
margin-left: auto;
height: 100%;
}
CSS back ground image isn't showing at all. Tried everything, googled, flipped through CSS books, moved the image into different directories, drank more tea and finally flipped Help! Site link : http://weary.me.uk/MT/ Code: * { margin:0; padding:0; }
BODY { background-color:#FFFFFF;
font-size:12px;
}
#header { background-color:#FFFFFF;
padding:0px; }
#left {
float:left;
width:18%;
padding:0%;
margin-left:1%;
margin-top:0%;
}
#right {
background-image: url(right_background.jpg);
background-repeat: no-repeat;
margin-right: 20px;
width: 220px;
border:1px solid #d2d7e4;
float:right;
width:20%;
margin-right:0%;
margin-top:0%;
padding:0px;
}
#center {
margin-right:30%;
margin-left:14%;
padding-left:10%;
background-color:#FFFFFF;
}
#footer { clear:both;
background-color:#FFFFFF;
padding:8px; }
Hi, I want to put a background image for a div section of my site. It works fine in i.e. but i can't get it to show up in firefox. Does anyone know why? CSS: Code:
body {
font-family : Arial, Helvetica, sans-serif;
font-size: 16px;
background: #330000;
text-align:center;
margin: 0;
padding: 0
}
#mainarea {
background-image:
url('alexandertea_bg_v03.jpg');
width: 719px;
height: 650px;
}
HTML: Code: <body> <div class="topbar"> <img src="images/lemonreghome.gif" id="home"> <img src="images/lemonregstory.gif" id="story"> <img src="images/lemonregwheretobuy.gif" id="wheretobuy"> </div> <div id="mainarea"> Hellow </div> </body> img { border-width: 1px; border-color: transparent; } this is the code i used in my css sheet to invalidate the borders around the linked images. for some reason every other way i tried it was messing up my drop-down menu. now the only problem i have is that ie still shows the text-decoration. at the moment i haven't applied text-decoration none, but i have tried it and nothing worked. any other solutions? here's the page i'm applying it to:: page Ok, Now when I am trying to nest divs for the header bar, left column. Nothing gets put into the header div and I've tried tons of stuff to get it to work. Heres a sample: Code:
<HTML>
<HEAD>
<title>
Page Title
</title>
<style>
.defaultText {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.titleText {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #000000;
}
.addModuleText {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
}
.adminHeaderText {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #000000;
}
.button {
font-family: Verdana, Arial, Helvetica, sans-serif;
padding: 2px;
border: 1px solid #0099FF;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
background-color: #1C4F9B;
}
.smallText {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #000000;
}
.moduleTitle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #000000;
}
.TabBg {
background-color: #1C4F9B;
border-color: black;
}
.NormalTabsBg {
background-color: #559cec;
border-color: black;
}
.selectedTab {
font-family: Verdana, Helvetica, sans-serif;
font-size: 13px;
color:white;
font-weight: bold
}
.normalTabs {
font-family: Verdana, Helvetica, sans-serif;
font-size: 13px;
color:gainsboro;
text-decoration:none;
font-weight: bold
}
.textBox {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
width: 100px;
border: 1px #000000 solid;
background-color: #FFFFFF
}
.largeTextBox {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
border: 1px #000000 solid;
background-color: #FFFFFF
}
#addNewModule {
padding-top: 10px;
padding-left: 5px;
padding-bottom: 10px;
}
#addNewModule a
{
border: 1px solid #000;
background-color: #1C4F9B;
padding: 5px;
}
#bodyWrapper {
border: 1px solid purple;
background-color: #559CEC;
width: 100%;
}
#header {
background: #EEE;
border: 1px solid red;
}
#header #headerLeftColumn {
float: left;
width: 500px;
}
#header h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
text-align: left;
vertical-align: top;
color: #000;
padding-left: 15px;
padding-top: 20px;
width: 100%;
}
#header #loginControl {
float: right;
width: 250px;
border: 1px solid #000;
}
#container {
float: left;
width: 100%;
margin-right: -260px;
border: 1px solid red;
}
#content {
border: 1px solid yellow;
margin-right: 260px;
}
#left
{
float: left;
width: 250px;
border: 1px solid #FFF;
}
#middle {
margin-left: 260px;
border: 1px solid orange;
}
#sidebar {
float: right;
width: 250px;
border: 1px solid #000;
}
#footer {
background: #999;
border: 1px solid #cecea5;
clear: both;
}
#module {
position:relative;
width: 100%;
padding: 2px;
background: #FFF;
border: 1px solid #000000;
font-size: 10px;
}
#title {
background-color: #C2DBF5;
padding: 3px;
border: 1px solid #144678;
text-align: left;
color: Black;
font-weight: bold;
font-size: 14px;
}
#moduleItem {
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
}
#moduleItem h1 {
font-weight: bold;
font-size: 12px;
margin-bottom: 0px;
}
#moduleItem p {
margin-top: 0px;
margin-bottom: 10px;
}
#module #footer {
background-color: #C2DBF5;
border: 1px solid #144678;
padding: 4px;
text-align: left;
color: black;
font-weight: normal;
font-size: 10px;
}
body {
color: #000000;
background-color: #E8E8E8;
font-family: Verdana, sans-serif;
font-size: smaller;
margin: 10px 10px 0px 10px;
}
</style>
</HEAD>
<BODY>
<form runat="server" ID="frm">
<DIV id="header">
<DIV id="headerLeftColumn">
<h1>Site Title
</h1>
<p>
Paragraph left text
</p>
</DIV>
<DIV id="loginControl">
Login buttons
</DIV>
</div>
<DIV id="bodyWrapper">
<DIV id="container">
<DIV id="content">
<DIV id="left">Left</DIV>
<DIV id="middle">Center</DIV>
</DIV>
</DIV>
<DIV id="sidebar">Sidebar text</DIV>
</div>
</form>
</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. |
|||||||