CSS - Css Borders Messing Up In Netscape 7.1

[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.

[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: (URL address blocked: See forum rules)

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

Any advice would be greatly appeciated.
Mark.

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?

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?

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 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?

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?

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.

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?

i'm new at CSS, and the width works fine in IE but not in Netscape. I'm trying to get #bottomLeftFirst1 to be the same width as #bottomLeft, but for some reason #bottomLeftFirst1 is wider in Netscape. Thanks!

#bottomLeft
{
position: absolute;
width: 175px;
height: 100%;
padding: 0;
margin: 0;
}

#bottomLeftFirst1
{
border-width: 1.5px;
border-style: none none none none;
width: 175px;
margin: 0;
padding: 5px 0 5px 10px;

}

I have made some pages with css styling.

This works perfect with IE, but he just ignores the css styling in netscape.

An example, I made an tumbnail from a picture, set the size in css, works perfect in IE, but he ignores it in netscape.

See example
http://www.bvkb.be/BVKB/Sportklimme...finale/test.php

Can anywhone help me how this comes.
On another page he takes some of the css, en some not.


Thanks

hi,
i have used nested divs and with overflow: scrolll and it works perfectly fine in IE but it has no effect in Netscape. how do i achieve the same in netscape without using iframes?
thanks in advance...

When I use padding in a box it increases the width of the box by the amount of the padding when viewed in NS. IE won't.
Anybody know of a good solution to this problem?
Code:

<html>
<head>

<style type="text/css">
.box1{
position: absolute;
top: 20px;
left: 40px;
width: 50px;
height: 30px;
border-width: 1px;
border-style: solid;
}

.box2{
position: absolute;
top: 55px;
left: 40px;
width: 50px;
height:30px;
border-width: 1px;
border-style: solid;
padding-left: 10px;
}
</style>

</head>

<body>
<div class = 'box1'>
box 1
</div>
<div class = 'box2'>
box 2
</div>
</body>
</html>

Thanks

I've been trying get a template working to transfer my site over to CSS (I've been reading about it and it seems to be the way to go) - have been working on it all weekend and have cracked a 3 column grid that seems to work well.

You can see where I've got to he
http://www.discographynetwork.com/nav2.php

The only small problem I have in ie is a missing pixel to the left of the home button. If you have a suggestion for that I'd be grateful.

However, when I looked at it in Mozilla and Netscape the buttons mess up and the tag line doesn't stay in it's div.

Can someone point me in the right direction.

Thanks.