CSS - Setting Div Borders, Please Help

Can any one suggest a better CSS script for having a border in IE
So far I have the following:
PHP Code:
 border: 1px solid #0099CC; 




The problem is that when ran in IE, the top border does not show. However it works fine in firefox. Also I get warnings on my script when I run my CSS validation tool.

Can any one help.
Thge URL is
http://pfwd.org.uk/sfd/update_test3.php

Hi,

Someone I know is trying to find a way of putting a border round an image (say 1px white) followed by another border around that (say 1px blue).

Anyone done this or have a good idea of a way to do it?

thanks

how can i use:

css Code:
Original - css Code .t {background: url(../images/dot.gif) 0 0 repeat-x; width: 20em; width:80%; left:50%; margin:20px; } .b {background: url(../images/dot.gif) 0 100% repeat-x} .l {background: url(../images/dot.gif) 0 0 repeat-y} .r {background: url(../images/dot.gif) 100% 0 repeat-y} .bl {background: url(../images/bl.gif) 0 100% no-repeat} .br {background: url(../images/br.gif) 100% 100% no-repeat} .tl {background: url(../images/tl.gif) 0 0 no-repeat} .tr {background: url(../images/tr.gif) 100% 0 no-repeat; padding:5px; } .t-exif {background: url(../images/dot.gif) 0 0 repeat-x; width: 20em; width:200px; right:0px;} .b-exif {background: url(../images/dot.gif) 0 100% repeat-x} .l-exif {background: url(../images/dot.gif) 0 0 repeat-y} .r-exif {background: url(../images/dot.gif) 100% 0 repeat-y} .bl-exif {background: url(../images/bl.gif) 0 100% no-repeat} .br-exif {background: url(../images/br.gif) 100% 100% no-repeat} .tl-exif {background: url(../images/tl.gif) 0 0 no-repeat} .tr-exif {background: url(../images/tr.gif) 100% 0 no-repeat; padding:10px; }

  

  .t {background: url(../images/dot.gif) 0 0 repeat-x; width: 20em; width:80%; left:50%; margin:20px; }


 .b {background: url(../images/dot.gif) 0 100% repeat-x}


 .l {background: url(../images/dot.gif) 0 0 repeat-y}


 .r {background: url(../images/dot.gif) 100% 0 repeat-y}


 .bl {background: url(../images/bl.gif) 0 100% no-repeat}


 .br {background: url(../images/br.gif) 100% 100% no-repeat}


 .tl {background: url(../images/tl.gif) 0 0 no-repeat}


 .tr {background: url(../images/tr.gif) 100% 0 no-repeat; padding:5px; }


  


  


  .t-exif {background: url(../images/dot.gif) 0 0 repeat-x; width: 20em; width:200px; right:0px;}


 .b-exif {background: url(../images/dot.gif) 0 100% repeat-x}


 .l-exif {background: url(../images/dot.gif) 0 0 repeat-y}


 .r-exif {background: url(../images/dot.gif) 100% 0 repeat-y}


 .bl-exif {background: url(../images/bl.gif) 0 100% no-repeat}


 .br-exif {background: url(../images/br.gif) 100% 100% no-repeat}


 .tl-exif {background: url(../images/tl.gif) 0 0 no-repeat}


 .tr-exif {background: url(../images/tr.gif) 100% 0 no-repeat; padding:10px; } 

to make my exif info box appear on the right of the image?
i have tried using right:0px but it doesn't work, any ideas?
current display page

q) In CSS or html, how can make my buttons and borders around a screen section ( created with css) have roundish borders and regular not corners

q) How can i get the colors of such buttons to be a bit more exciting eg go from ligh to dark blue instead 1 uniform color?

I have a small table that is not displaying borders in IE. On this page

The section with Financial Aid and Parents should have a grey 3px border on the right hand side going from the header image to the person at the bottom. In FF it displays as intended.

HTML

Code:

 <table width="100%" border="0" cellpadding="0" cellspacing="0">
	    <tr>
		  <td id="finaid" class="finaid greybrdr"></td>
		  <td id="parents" class="greybrdr"></td>
		  <td id="students" class="students"></td>
		</tr>
		<tr>
		  <td class="bod finaid greybrdr"></td>
		  <td class="bod greybrdr"></td>
		  <td class="bod students"></td>
		</tr>
		<tr>
		  <td id="finback" class="greybrdr"></td>
		  <td id="parback" class="greybrdr"></td>
		  <td id="studback"></td>

CSS
Code:

.greybrdr {
  border-right: 3px solid #e4e4e4;
}

.finaid {
  border-left: 2px solid white;
}

.students {
  border-right:  5px solid white;
}

.bod {
  width:  183px;
  height:  200px;
  background-color: #FFFFFF;
}

Hi Guys,

Beat with me because ive just started using CSS for positioning etc and im giving it a whirl before I try it for a live project.

I have an annoying problem though which I cannot seem to solve whereby the border doesn't show fully in IE but in Mozilla it does?

I tried vary the code a bit in the CSS and I would either lose the top border, bottom border or both...? Bizarre.

Here is the code it is very simple and you can see where I am going with it.

I appreciate the help. Thanks!

<style>

body{
background-color: white;
color: #0083D7;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
margin: 0;
padding: 0;
text-align: center;
}

#wrapper{
width: 770px;
color: white;
margin: 10px auto;
text-align: left;
color: #666666;
}

#logo{
height: 70px;
}

/**
* Top Navigation Under Logo.
**/

#nav{
margin: 0;
padding: 0;
}

#nav ul{
padding: 0;
margin: 0;
}

#nav ul li{
display: inline;
padding: 0;
margin: 0;
}

#nav ul li a{
font-size: 90%;
color: #0083D7;
font-weight: bold;
text-decoration: none;
text-align: left;
border: 1px solid #0083D7;
padding: 4px;
line-height: 25px;
}

#nav ul li a:hover, #nav ul li a:focus{
background-color: #0083D7;
color: #FFEF00;
}

</style>

</head>

<body>

<div id="wrapper">

<div id="logo"></div>

<div id="nav">
<ul>
<li><a href="#">Holidays</a></li>
<li><a href="#">Flights</a></li>
<li><a href="#">Accommodation</a></li>
<li><a href="#">Ski</a></li>
<li><a href="#">Cruise</a></li>
<li><a href="#">Holiday Insurance</a></li>
<li><a href="#">Travel Guides</a></li>
</ul>
</div>

</div>

</body>

Hi, Im not sure what the problem is with my code, but it gives me full borders when I ask for only top and bottom. Here is my CSS.
css Code:
Original - css Code .logo{ width: 100%; border: 1px solid #FFFFFF; font-size: 32px; } .menu{ width: 150px; height: 320px; border: 1px solid #FFFFFF; text-align: left; } a.menu{ border-top: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF; color: #FFFFFF; width: 100%; }

  

 .logo{


     width: 100%;


     border: 1px solid #FFFFFF;


     font-size: 32px;


 }


 .menu{


     width: 150px;


     height: 320px;


     border: 1px solid #FFFFFF;


     text-align: left;


 }


 a.menu{


     border-top: 1px solid #FFFFFF;


     border-bottom: 1px solid #FFFFFF;


     color: #FFFFFF;


     width: 100%;


 } 

Here is my html of that part.
html Code:
Original - html Code <span style="float: left"> <div class="menu"> <a href="" class="menu">asdf</a><br /> <a href="" class="menu">asdf</a><br />

  
<span style="float: left">
    <div class="menu">
    <a href="" class="menu">asdf</a><br />
    <a href="" class="menu">asdf</a><br />

Here is what it outputs. http://blacknine.net/test.html

I am learning CSS and wish to put a border around selected tables using the following code:

table.sidebar
{
border: 2px black;
padding: 50px

}


Something similar to this code was working OK earlier today, but now it won't. The cell padding command works, but other tags like border, width, etc., are not. I have tried disabling all other table styles in the CSS.

Any ideas? I am using MS FrontPage 2002. Also, whys is it that when I apply a style to a table, like the one above, FrontPage puts in the following HTML code:

<table class="sidebar" style="border-collapse: collapse" bordercolor="#111111" cellpadding="0" cellspacing="0">

If I go to remove it to
<table class="sidebar">
all of the formatting is lost. Seems like this is defeating the whole purpose of CSS

Thanks,

Keith

Hey, searched so don't give me crap.

I have 2 images, searchleft.jpg (looks like { ) and searchright.jpg (looks like } )

I only posted the Doc type just incase, I validated my webpage(www.gameyin.com) and nothing that could hurt this has happened. Anyway I want the rounded borders on the left center, for searchleft.jpg and a roundedborder for searchright.jpg on the right center. I hope I have been very clear. All the searches need 4 images...anyway...

PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<style type="text/css">
html {
    height: 100%;
    overflow: scroll;
}
body {
    font-family: tahoma, arial, sans-serif;
    font-size: 11px;
    background: #DEDEBA;
    margin: 0px 0px 0px 0px;
    color: #DEDEBA;
}
input, option, select, textarea {
    font-family: verdana, tahoma, arial, sans-serif;
    font-size: 11px;
}
.search {
    margin: 0px;
    padding: 5px 5px 5px 7px;
    width: 366px;
    height: 24px;
    float: right;
}
.input-search {
    width: 259px;
    margin: 0px 5px 0px 0px;
    padding: 5px;
    background: #DEDEBA;
    border-color: #666666;
    float: left;
    text-shadow: 808080;
    color: #808080;
}
</style>
    <script type="text/javascript" src="webfunctions.js"></script>
</head>
<body>

            <div class="search">
     <form action="search.php" method="post" style="display:inline;">
            <div>
<input type="text" name="search" class="input-search" value="Enter your Search Query" onblur="if(this.value=='') this.value='Enter your Search Query';" onfocus="if(this.value=='Enter your Search Query') this.value='';" />
<input type="image" src="images/search.gif" /></div>
</form>
</div> 

if someone would, check out my testing grounds website... jon.endysis.org

there are 3px #fff double borders going along each side of the layout (you can see them on either side of the space shuttle background) that are supposed to extend all the way down the layout, but only go until the end of the shuttle. I've learned that if I just have html br /'s after the the shuttle part they extend down for those, but for some reason don't extend down for my div class="contentleft" and my div class="contentright".

if anyone wants to check my source, div id="racingstripes" is the layer that has the stripes, and it has ONLY the stripes.

my css is:
#racingstripes{
border-right:3px #fff double;
border-left:3px #fff double;
}

any ideas please? i can't figure it out. thanks for any help!

Hi

I'm currently testing my code within the firefox browser and have found that no borders appear whatsoever.

I was using the dotted border however changed it to solid to see if that made a difference however this did not help.

The css I use for the <div> is as follows:

Code:

.div_surround {
	width:185px;
	min-height:200px;
	float:left;
	margin-top:5px;
	margin-right:5px;
	border-bottom-style: solid;
	border-bottom-color: #CCCCCC;
	border-left-style: solid;
	border-left-color: #CCCCCC;
	border:1px;
}

I know a lot of people dont like the width to be specific pixels however unless this makes a difference to my situation, please ignore this for the time being. I am looking to change it in the future.

By the way this code works fine in IE where I see a box with a bottom and left border.

Thanks in advance for any help.

Billabang!

Hello, I have a list that looks like this

Code:

	<ul>
		<li><a href="#">&nbsp; &nbsp;List item 1</a></li>
		<li><a href="#">&nbsp; &nbsp;List item 2</a></li>
		<li><a href="#">&nbsp; &nbsp;List item 3</a></li>
	</ul>

... and my CSS for the list looks like this

Code:

ul {
margin-left: 0px;
list-style: none;
border: none;
border-top: 1px solid #000000;
}

li {
border-bottom: 1px solid #000000;
}

li a {
text-decoration: none;
border-bottom: 1px solid #000000;
border-left: 14px solid #82817C;
color: #FFFFFF;
background-color: #585752;
}

li a:hover {
text-decoration: none;
border-left: 14px solid #9D9E8E;
border-bottom: 1px solid #000000;
color: #FFFFFF;
background-color: #585752;
}

My problem is that I can't get the borders go the way I want them to.
As you can see, the list items have two borders, a left border and a bottom border. The unorganized list-tag has one border, a top border. In both cases, the top and bottom borders are 1px in height, and the left border is 14 pixels in width.
The ul's top-border is full width, meaning it starts at the left side of the page, while again the li's bottom-border starts AFTER the left-border... ok, that was confusingly explained. What I'm trying to achieve is that the li's left-border is over lapped by it's bottom-border - so that the bottom border looks just like the ul's top-border.

Ok, if you put the code to your editing program and view it "in action" you should be able to see what I mean.

So to summarize it all, how can I force the bottom-border to over lap the left-border?

Thank you in advance,
- Kimppa

Hi I have built some nav buttons on my site and they looked as I wanted however when i attached links to them a border appeared around the image can someone tell me how to get rid of them please. DYNAMIC WEB DESIGN thankyou in advance.

I have a page and it's a massive mess of nested tables and abs-positioned divs. Amongst these are two that become visible/invisible on the onclick of a checkbox. They start out with display:none inline.

Still with me?

There arent any floating elements in use, and pretty much everything has a width and height specified, so if there's some hasLayout freakyness going on i'd love to know what.

Anyway, in IE7 when you click said checkboxes their target divs and thier contents appear correctly - but the divs' borders are missing, re-toggling the checkbox off and on again shows the border and then again for any subsequent re-showing. it's just the initial setting of display:''

I can't post the code but it looks something ten times freakier than the attatched recreation attempt, unfortunately i can't rectreate it, but you'll get the idea.

Can anyone help? I'm going to try running some javascript after the page has loaded to do a quick double toggle to simulate the first no-border instance!

Basically on this page http://forum.prxa.info/profile.php?info=1&pageno=2

At the bottom the pagination boxes seem to have extra borders around them?

Should look more like http://forum.prxa.info/popular.php with seperate boxes!