|
CSS - Images In Header Getting Thin White Border Applied Somehow
All,
I have a header on this page backup.whiteslimo.com with 3 images inserted into it listing the company name, service, and contact info. My problem is that when they are displayed there is a thin white border on the bottom and right hand sides of each image. But the image doesn't have these borders. If you are in Firefox/Mozilla and you right click on the individual images and select View Image, you will see that the image itself does not have these borders. I am thinking that somewhere along some attribute is being added that is causing this but since I am a CSS neophyte (This is still my first week lol) I am not sure. Any help is much appreciated. Similar TutorialsHi. I want to usw a dropdown list on my page. All other objects are inputfileds, a nd they have thing border around them Following CSS is userd for inputfields: .inputfield { font-family:Verdana, Arial, Helvetica, sans-serif; font-size : 8pt; color: #000000; background-color: #ffffff; border: #326564 1px solid;} I try to do something else for Dropdownlist, but it doesn't work .listbox { font-family:Verdana, Arial, Helvetica, sans-serif; font-size : 8pt; color: #000000; background-color: #ffffff; border: #326564 1px solid ; clear: left; clip: rect( ); } Can you point me to an error, if there is one? Thank you in advance NY I have the following code which works fine in IE but not in firefox. <table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF"> <tr><td></td></tr> </table> IE displays just white space as intended, but firefox displays a black border line. I need a white border of 1 pixel around the table. Using my http://www.thatspotonline.com as an example I'll explain my problem. I'm trying to use a 3 column fluid layout with a header and a footer. I've gotten past the browser problem with IE and now face a new problem with proper display in firefox. With the included css and attached xhtml layout I end up with a rather large gap on the bottom of the design without adding quite a bit of content to make the page length grow. I've tested with about everything else and this problem doesn't show up. I would gladly take some advise if anyone has any thanks. Code: * {
margin:0 auto;
padding:0;
}
h2 {
font:bold 2em/1.4 "Lucida Bright", Georgia, Times, serif;
color:#8B9F86;
}
h3 {
font:bold 1em/1.6 "Lucida Bright", Georgia, Times, serif;
color:#845697;
}
a {
color:#4C53E0;
}
a:focus, a:hover, a:active {
color:#EB8518;
}
body {
background:#000000 url(images/body2.jpg);
background-repeat:repeat;
background-position:top left;
font-size:90%;
margin:0 auto;
padding: 24px 0;
}
#outer {
margin:0 auto;
width:80%;
min-width:40em;
max-width:70em;
border:10px solid #EEEEEE;
border-width:0 5px;
background:#EEEEEE;
}
ul#nav:after, #outer:after, #sub:after, form:after, form div:after {
content:".";
display:block;
visibility:hidden;
clear:both;
height:0;
}
* html #nav, * html #content, * html form, * html form div {
height:1%;
}
ul#access, .off {
position:absolute;
left:-1000em;
top:-1000em;
}
hr {display:none}
#header {
background:#EBEBE9 url(images/banner-bg2.jpg) repeat-x left bottom;
}
#header h1 {
padding-left:.6em;
font:bold 3em/2.5 "Lucida Bright", Georgia, Times, serif; /* line-height allows for image of buildings */
letter-spacing:1pt;
color:#FFFFFF;
background: transparent url(images/banner2.jpg) no-repeat right bottom;
}
#header h1 a {
color:#FFFFFF;
text-decoration:none;
}
ul#nav {
list-style:none;
margin:3px 0 1em;
text-align:center;
background:#FFFFFF;
border-top:2px solid #444444;
border-bottom:2px solid #444444;
}
#nav li {
list-style:none;
margin:0 auto;
width:94%;
min-width:40em;
max-width:70em;
display:block;
text-align:center;
background:#000000;
}
* html #nav li {
width:24.9%;
}
#nav a {
display:block;
font:bold 1em/1.8 'Lucida Grande', Arial, tahoma, verdana, sans-serif;
text-decoration:none;
color:#444444;
margin:1px;
background:#FFFFFF;
}
#nav a:focus, #nav a:hover, #nav a:active {
border:1px inset #8B9F86;
margin:0;
color:#EB8518;
text-decoration:underline;
}
ul#nav li#active {
background:#FFFFFF;
font:bold 1em/1.8 'Lucida Grande', Arial, tahoma, verdana, sans-serif;
color:#000000;
text-decoration:underline;
}
#sub, #right {
font: 1em/1.5 'Lucida Grande', arial, verdana, sans-serif;
word-spacing:.1em;
margin-bottom:1em;
}
#sub {
width:74%;
float:left;
position:relative;
}
#center {
width:65%;
float:right;
}
#left {
width:33%;
float:left;
}
#right {
width:25%;
float:right;
}
#center p {
margin:.5em 2% .5em 0;
}
img.img-right {
float:right;
}
#left h2 {
color:#845697;
font-size:1.5em;
}
#left p {
font-size:.9em;
}
#right {
font-size:.9em;
}
#right h2 {
font-size:1.2em;
}
/** Footer **/
#footer {
clear:both;
margin-top:1em;
font: 0.9em/1 'Lucida Grande', arial, tahoma, verdana, sans-serif;
border-top:3px double #C8DCC2;
}
#footer p {
margin:1em 1em 1em 0;
text-align:center;
padding: 21px 0;
}
#footer ul {
list-style:none;
margin-top:.7em;
}
#footer li {
display:inline;
border-right: 1px solid #C8DCC2;
padding:.3em 2%;
}
Quick question, can someone tell me why do i get a white space on the right side of the screen http://www.impulsanl.org/testing.htm on IE 7 and IE 8? It seems to work ok with firefox and google chrome. (all screen). CSS code: Code: #extraDiv1 {
background: url(images/header1.png) repeat-x;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100px;
margin: 0;
padding: 0;
}
HTML Quote: <div id="extraDiv1"></div> thanks. I've been trying to solve this problem about my website. My site What it is suppose to look like. Image Thanks in advance. Good day all, I have set up my index page for my site with css rollovers instead of javascript rollovers, and I really like the loading time, the problem that I am having is that when I click on the image rollover link there appears a white box around the image. how can this be avoided? Please see the link below for what I am trying to explain... http://www.karmaimports.net/indexcss.htm thanks in advance... Brook I am trying to get the middle table box to show a very thin line but it is not thin! i have been told that i should be using CSS. is this how i should be doing this and if so what code should i be using? thanks <table width="100%"> <tr> <td width="65%"> </td> <td width="1%" bgcolor="#000000"> </td> <td width="34%"> </td> </tr> </table> Hello, I can't seem to find a solution across the web to such a simple problem. I want to have a border surround my main container, composed of simple images that fade into the background. Here's a mockup image. And here's what I'm working on. As you can see, I have a simple jpg repeating vertically for the side border effect, but how can I get the top and bottom correct? I tried some empty div's with my top and bottom background images but just can't seem to get it working. Also, keep in mind that the width is fixed but the height is not. Thanks. I'm trying to get two images in my header/logo section. One is a logo with the site title etc, which I want to sit in the direct center of the header section, the other is a repeating gradient which I want to repeat across the page. I'm struggling to get the first image to sit on top of the second. I'm new to CSS .. got the basics, but having a problem using 3 images in a header for a site ..... [---img_1 ------img_2 -----img_3----] I want img_2 to allways be centered. in the page, and img_1 and img_3 on the sides... so far I have that working .. now the problem .... I want img_1 & img_3 to scale depending on size of browser ... so that the header fills 100% of the width ..... html <div id="siteHead" align="center"> <div id="leftbar"></div> <div id="midbar"></div> <div id="rightbar"></div> </div> css #siteHead { width:100%; } #leftbar { float:left; width:100%; height:248px; background-image: url(imgs/1_01.jpg); background-repeat: repeat-x; text-align:right; } #midbar { float:left; width:778px; height:248px; background-image: url(imgs/1_02.jpg); background-repeat: no-repeat; text-align:center; } #rightbar { float:left; width:100%; height:248px; background-image: url(imgs/1_03.jpg); background-repeat: repeat-x; text-align:right; } so what am I missing ... or whats my n00b mistake ... I hope I made sense ... english is poor playing with width %'s if browser is so small the 3 images stack on each other .. I would like to prevent that from happening ... but one n00b issuse at a time.... Sitewide, I have a bottom border affect, rather than an underline for links. But it applies itself to linked images as well. I have borders shut off on images, but that doesn't stop it from applying the border. I've tried img border:none; and a few other tricks, but it only does the trick in Chrome. CODE: a { text-decoration: none; } a:hover { text-decoration: none; border-bottom-width: 1px; border-bottom-style: solid; padding-bottom: 2px; } img { border-width: 0px; } img a { border-width: 0px; } img a:hover { border-width: 0px; } A number of years ago I created a web site for a mattress store where I worked (7 days a week, for 5 years). The point is this: I'm not a great web designer. The code is ancient and the owner wants me to bring the thing up to date. Using tables, I had a system for creating thin, vertical lines that went up and down the entire heighth of the page. The lines divided the content area from the borders in a neat way - although, again, using very old HTML. It looks like this: http://www.wholesalewarehouseinc.com What I'd found was that if I used a fixed-sized header and some tables I could produces the thin line that you see on that page. This was the basic code: Code: <table width=100% height=100% cellpadding=0 cellspacing=0 topmargin=0 leftmargin=0 rightmargin=0> <td background="http://www.wholesalewarehouseinc.com/lf.gif" width=50% align=left><td width="1" background="dot.png"> <img src="dot.png"></td> </td><td valign=top> <table cellpadding=0 cellspacing=0 border=0 rightmargin=0 leftmargin=0 bottommargin=0> <img src="logo.png"></td> <td background="http://www.wholesalewarehouseinc.com/lf.gif" width=100% align=left><td width="1" background="dot.png"> <img src="dot.png"></td> </table> My question is this, and maybe this is too general for a meaningful answer. Is there a way to do the same sort of thing with CSS? I'm using a PHP script from A List Apart to generate a random image for my header whenever it is called. While the script is great, my image sizes need drastic reduction. These header images are composed of two parts - 1)The title text 2)A background photograph. I can increase the compression of the background photograph to get it down from 120kb to about 20kb with little notice in quality - a great improvement! However, when I do this, the text suffers a great loss of quality. Since I can save the text as a .gif which would only register about 6kb, I was wondering if there was a way I could combine the script to get the random photograph and have the text lay on top. Ive tried putting both img codes in the same div and giving the text a higher z-index, but that does not work. I know that the best-case scenario would be to just use actual styled text in the div to go on top of the photograph. But I can't get the stroked look I'd want by doing this. Any suggestions? I have a layout in which I use a <div> called #image on all pages in the site. I know this question is silly, but I have no idea how to do this: #image { margin-left: 0px; margin-right: 178px; margin-top:0px; padding:0px 0px 175px 0px; border-bottom:1px solid #003366; background-color:#f5f5f5; background-image:url(binary_liquid_2.jpg); background-position:top left; background-repeat:no-repeat; } as you can see in this div, the background image for the home page is binary_liquid_2.jpg If I wanted to maintain the same page structure, but use a differnet image in that div on each page, how do I code that? I was thinking that #image would simply provide the "box" dimensions and then I would have seperate classes for each page like .image_help .image_contact. These classes would then place a new picture in that #image div depending on the page I was viewing. IS that correct? And, wodl the HTML markup be: <div id="image" class="image_contact"> </div> is that close? please help! thanks a million jpm226@bellsouth.net I have an imaged logo on top of my page that I want to link to the startpage. However, whenever I link the image, I get the typical border that signalizes a link. How can I get rid of this border with the help of my Stylesheet? It seems like I can't even change the color of the border in IE?? Thanks a lot Steve Edit: Never mind -- searched before posting and did not find anything, but after I posted, there it was... Used {border:0;} on the img tag -- voila... I tried to play around with my code to see if I could get a image of a bar and its two ends on the top border of the div containers and have text on it. But this is what I have so far and its not working! Code: .preview {border 1xp solid black;
background-color: white;
}
.preview .innerdiv{
background: transparent url(css/bar.png);
position: relative;
left: 2px;
top: 2px;
padding: 1px 4px 15px 5px;
}
}
I have a web page that I am going to give to a someone that will give me something if I get it done in a week so I want to get this hard to figure out proplem out of my way so I can get more done faster. Your help will be most thankful! I want something like this to help get a better understanding what I want. http://www.quake3world.com/forum/portal.php Hey guys... I feel like a deer caught in the headlights here with all this content. Long story short, I'm using the kubrick default wp theme which comes with slightly rounded header edges. I've created my own header in the same format, and am using it as the background image - fair enough. However, I am interested in nesting a smaller image ON TOP of the background header image, so that my smaller header image overlaps the larger background image. I've been playing around with code, and the only thing I've been able to do, is either make the bigger background the same color as the background image (but then this merely makes the header bg color squared, not rounded edges etc). How do I overlap two images within the header section of a wp default theme? Your highly valuable feedback is appreciated. x. Sorry about the vague description, but I'm wondering how to achieve an effect like the ones on this page: http://www.csszengarden.com/?cssfile=/196/196.css&page=0. I've seen the effect on many other websites, but I can't find them at the moment. On the page the content div grabs your attention effectively because its borders make it pop out from the background. How are the border images and divs setup to achieve this effect? I use the following CSS for my links, and use a border-bottom to give them a dashed underline... Code: a {
color: #AC4870;
border-bottom: 1px dashed #DDDDDD;
text-decoration: none;
}
a:hover {
color: #DDDDDD;
border-bottom: 1px dashed #AC4870;
text-decoration: none;
}
This underline also shows up under my images that are used as links. How would you write CSS that would remove this dashed border-bottom from my image links? Thanks Firefox is putting a gray border on most of my images. The border is sometimes on the bottom or off to the right. If I add padding to the images sometimes the border will go away. The images are not links. I have basically covered every option in CSS to eliminate the problem with no prevail my CSS: Code: body img{ padding: 0; border:none; -moz-border-radius: 0; -khtml-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; -webkit-box-shadow: 0 0 0 #000; -moz-box-shadow: 0 0 0 #000; text-decoration: none; outline:none; overflow: hidden; }
Hopefully someone has encountered this before or has some information to help? |
|||||||