CSS - Custom Borders Messing Up

OK, I have a layout consisting of a header div, then a wrapper div with an absolutely positioned nav div on the left, and content divs with large left margins on the right.
Code:

+--------------------------------------+
|                                      |
|                                      |
|                                      |
+--------------------------------------+
+--------------------------------------+
| +-----+ +--------------------------+ |
| |     | |                          | |
| |     | |                          | |
| |     | |                          | |
| |     | +--------------------------+ |
| |     | +--------------------------+ |
| |     | |                          | |
| +-----+ |                          | |
|         |                          | |
|         |                          | |
|         |                          | |
|         +--------------------------+ |
+--------------------------------------+

The problem is that in IE, the nav div over laps the two on the right. I have the wrapper div position: relative so that I can position the nav div absolutely in relation to it (to accomodate varying header heights). But for some reason the nav div is lining up right with the content divs, like it has their left margin or something (but margin shouldn't affect absolutely positioned stuff right?). Very frustrating... Is this a known IE bug or should I post my code?

http://www.alexwait.com/Nortonville...ester/main.html


When I load the page in Safari, Opportunities has a border around it that is messing up the whole bar.

It stinks.

What should I use with CSS to get that to go away?

EDIT:
Fixed title.

[FONT=Tahoma]Good Evening,

I'm having a bit of trouble on a website i'm working on. It all looks fine in Firefox, but IE seems to mess up the positioning of the 2 columns on the right hand side.

I'm fairly new to CSS so my mind is baffled!

the dilemma can be seen at: My Page

I cant see that a hack would be needed, but i just cant figure it out!

Any advice would be greatly appeciated.
Mark.

I'm having a problem getting a background image to show properly in Internet explorer.. It's hard to explain, but if you go to my page... http://www.55yardline.com you'll see what I'm talking about.

Works find in every browser I tested with except Internet Explorer. If you look at the background image of the player, and than scroll up and down a bit, the image gets all messed up.

Is there any way to fix it?

Hey guys, I know there are some little things that throw off a browser but I can't nail them down on this one. Its pretty early on in the development stage but I want to get things straight before I move forward. Its not letting me put two div's right next to one another Currently the CSS is in the same file as the HTML but I broke it up for easier reading on here. Thanks for any help.

EDIT: Updated code further down

I'm doing a mini site for a community college, and I need some help with getting the page to render correctly in both Firefox and Internet Explorer. Actually, the page renders perfectly in IE, but it's God awful in Firefox.

The URL is http://jordanmeeter.com/basketball.html

Do any of you know what's wrong with it?

Hi,

I'm using a not-yet-fully-supported piece of code to get rounded corner elements on my site. To ensure the most universal support, I am actually using three properties; one for Mozilla browsers, one for Webkit Browsers and the non-specified property for the final CSS3 spec. So:

Code:

-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;

I've also had to install a JavaScript library (CurvyCorners) that adds this functionality to IE, which seems to work fine.

On two of my divs have vertical scrolling, as well. So I've used the following:

Code:

 overflow-y: auto;
overflow-x: hidden;

This works just fine in Firefox, Safari, Chrome, and Opera (though the rounded corners do not show in Opera) -- But in IE8, for some reason, the scroll bar will scroll the entire div (including the background, which is usually fixed) rather than just the content. I have figured out a fix for this, which is to remove the webkit border radius property... which removes my rounded corners from not only IE, but obviously Chrome and Safari as well.

My question is: is there any way to make these two features reconcile their differences and work together?

The site is at www.FinchHouseRecords.com
and the style sheet can be found at www.finchhouserecords.com/style.css

Thanks for your help!

-Shawn

PS - I ran the validation tools... passed the XHTML, and the only issues on the CSS are related to the rounded-corner properties not being recognized as CSS2.1, but they still all work in the other browsers.

I have a form that looks similar to this:

Code:

<div id="form">
     <div class="title">Fill out this form:</div>
     <div class="main">
          <div class="item bg1">
               Enter your name:
               <div class="field">
                    <input type="text" />
               </div>
          </div>
          <div class="item bg2">
               Enter your email address:
               <div class="field">
                    <input type="text" />
               </div>
          </div>
     </div>
</div>

now, when i insert an image in the item div, there is an overflow problem which i fix with overflow: auto in the item class. now, when a user is tabbing through the form, it will select the div with the overflow: auto in it.

any suggestions?

Hello all,

I am trying to make a horizontal nav bar using a list. Everything was going good until I tried to add an image (essential a line) to seperate each <li>. When I did this, the height of the nav bar expanded and it moved the entire list down about 15 pixels or so. I am attaching an image before I added the image and after I added the image to show.

Here is my css code for before I add the image:
PHP Code:
#navbar {
    height:37px; 
    line-height:33px;
    padding: 2px 0 0 10px;
    vertical-align:top;
    background: url(images/linkbarbg1.png) repeat-x;
    font-family: Tahoma, Georgia, "Times New Roman", Times, serif;
    font-size: 18px;
    color: #FFFFFF;

}

#navbar ul {
    vertical-align:top;
    margin:0;
    padding:0;
    border: 0px solid #000000;
}

#navbar ul li {
    display: inline;

}

#navbar ul li a {
    display: inline;
    text-decoration: none;
    padding-top: 5px;
    padding-bottom: 4px;
    padding-right: 10px;
    padding-left: 10px;
    color:#FFFFFF;

}

#navbar ul li a:hover
{
height: 31px;
background:url(images/linkbarbg1hover.png) repeat-x top left;
background-color: #FF3300;
} 





And HTML:
PHP Code:
<div id="main">
 <div class="leftshadow">
  <div class="rightshadow">
   <div id="header"><img src="images/logo1.png" /></div>
   <div id="navbar">
    <ul>
     <li><a href="#">Milk</a></li>
     <li><a href="#">Eggs</a></li>
     <li><a href="#">Cheese</a></li>
     <li><a href="#">Vegetables</a></li>
     <li><a href="#">Fruit</a></li>
    </ul>
   </div>
  </div>
</div> 





And here is what it looks like:


My CSS Code is the same for after, here is my HTML code for after:
PHP Code:
<div id="main">
 <div class="leftshadow">
  <div class="rightshadow">
   <div id="header"><img src="images/logo1.png" /></div>
   <div id="navbar">
    <ul>
     <li><a href="#">Milk</a></li>
     <li><img src="images/linkbarseperator1.png" /></li>
     <li><a href="#">Eggs</a></li>
     <li><a href="#">Cheese</a></li>
     <li><a href="#">Vegetables</a></li>
     <li><a href="#">Fruit</a></li>
    </ul>
   </div>
  </div>
</div> 





and here is what is looks like:


Is there a way to fix this?

UPDATE
I have noticed the same thing happens even when it is not a list. Therefore, it must be due to some other factor...does anyone have any ideas?

Hi All,

I am trying to set a style in my CSS that will show a border-bottom for an entire row. So far I can only get it to work on a per cell (<td>) basis.

I am using Dreamweaver MX 2004 and when I select an entire row and assign it a style, it just add's it to the <tr> tags at the top of those rows.

Code:

<!-- This is a Row that is at the top of the table -->
<table width="100%"  border="0" class="fullwidth">
  <tr>
    <td class="head">This is a header </td>
  </tr>
</table>

<!-- This is where I want the border-bottom attribute to show up -->
<table width="100%"  border="0" cellpadding="2" cellspacing="1" class="list">
  <tr class="list">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="list">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="list">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="list">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="list">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

Here is the CSS:
Code:

table.fullwidth
{width: 100%;
background-color: #FFFFFF;
border: 0px;
border-collapse: collapse;
border-spacing: 0px;}

tr.list
{background-color: #EFEFEF;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #000000;
border-bottom: 1px dotted #000000;}

Hello,
I can't for the life of me figure out how to get these thin white borders like on this website:

http://www.viceland.com/index_us.php

Is this done with a style sheet? I can't find any reference to a border. How is this done?

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 guys,

I am using the following css to style a content box:

Code:

/*---------------- Start of Testimonies Content Box ---------*/
#testimonies {
WIDTH: 175px;
MARGIN: -85px 0px 0px;
POSITION: right;
height: 60px;
float:right;

BORDER-RIGHT: #d9ddb9 1px solid; 
BORDER-LEFT: #d9ddb9 1px solid; 
BORDER-BOTTOM: #d9ddb9 1px solid; 
BORDER-TOP: #d9ddb9 1px solid; 

PADDING-TOP: 10px; 
PADDING-RIGHT: 10px; 
PADDING-BOTTOM: 20px; 
PADDING-LEFT: 10px; FLOAT: right; 

BACKGROUND-IMAGE: url(images/bg-down-right.gif);
BACKGROUND-POSITION: 50% bottom;  
BACKGROUND-REPEAT: repeat-x; 
BACKGROUND-COLOR: #fafceb;
}


.testimonies-h2 {
	PADDING-RIGHT: 3px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; BACKGROUND-COLOR: #fafceb
}


#testimonies H2 {
	PADDING-RIGHT: 0px; BACKGROUND-POSITION: 2px 3px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 100%; BACKGROUND-IMAGE: url(images/bg-h2.gif); PADDING-BOTTOM: 2px; TEXT-TRANSFORM: uppercase; COLOR: #8fa300; PADDING-TOP: 2px; BACKGROUND-REPEAT: repeat-x
}


/*---------------- End of Testimonies Content Box ---------*/

I want to add an inline frame inside the 'testimonies' div in my html but it keeps using the border styling of the css above.

I tried using this to cancel it out (placing my inline frame in a span, but it did nothing)

Code:

#testimonials {
border-left:none;
border-right: none;
border-bottom:none;
border-top:none;
}

HTML CODE:

Code:

<div id="testimonies">
<h2><span class="testimonies-h2">Testimonials</span></h2>

<span class="testimonials">
<!-- ========== V-NewsTicker v2.2 (Freeware)  ============= -->
<script type="text/javascript" src="v_newsticker_1.js"></script>
<!-- ======================= -->
</span>

</div>

Is it possible to have more than one border in CSS? I want to have a grey and green border around an area of text, something like this.

So is it possible to have two or more borders in CSS and if so, how?