CSS - Inline Anchor Links Messing With My Design

Hi. I am thinking my two problems are related!

Here are my two problems:
My top nav bar links don't work in Firefox and the design breaks in IE7.

Any help would be much appreciated! I have validated it, and I know the slider and video don't validate, but I still have these problems even when I take those out. Thanks so much for any help you can provide!

christthesavior.org


Thank you!!!

look at my site. it is very boxy and almost TOO structured. is there a design trick i can use to mix it up a little? specific examples would be greatly appreciated.

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

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.

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?

Hey there,

I have a page to print a discount card - and if it is on one page there print preview works great.

(ex. http://www.rxclubcard.com/your_card.php )

However, if i try to put 5 cards sequentially, and then look at the print preview, after the first page of cards the 2nd and third pages do not show the cards and the print gets screwed up. I am running a for loop just to print 5 table rows. Why does this happen?

(ex. http://www.rxclubcard.com/5cards.php )

I would appreciate any help! Thanks guys

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

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?

Hello.

I have a site that I've done completely using dhtml and css.

Everything is perfect in IE 6.0. However, Netscape 7.1 does weird things with the borders I've specified.

I've tried to tweak and mess with it, but nothing has produced a result that looks the same in both IE and Netscape. Does anyone have any ideas as to why it's looking the way it is in Netscape and what I can do to fix it?

The page is at: http://www.americansforthearts.org/sarah/test/

thanks.

I started using custom borders after seeing ALA's article on custom borders, but I'm running into a problem. If the overall width of the article isn't over 300px, then it doesn't bridge all the way, but I'm not wanting 300px width. Is there any way to eleminate the gap at the bottom. BTW, it's not just an IE thing, it's doing that in FF, and Opera too.

Here's my code:
Code:

div.Article {
  background: 
	url(images/menu/topleft.jpg) 
  top left no-repeat;
  }
div.Article h2 {
  background: 
	url(images/menu/topright.jpg) 
  top right no-repeat;
  font-size:1.3em;
  padding:15px;
  margin:0;
  color: #000;
  }
div.ArticleBody {
  background: 
	url(images/menu/right.jpg) 
  top right repeat-y;
  margin:0;
  margin-top:-2em;
  padding:15px;
  }
div.ArticleFooter {
  background: 
	url(images/menu/bottomleft.jpg) 
  bottom left no-repeat;
  }
div.ArticleFooter p {
  background: 
	url(images/menu/bottomright.jpg) 
  bottom right no-repeat;
  display:block;
  padding:15px;
  margin:-2em 0 0 0;
  }

HTML too:
Code:

<div class="Article" style="width: 210;">
  <h2><b>Menu</b></h2>
<div align="center">
  <div class="ArticleBody">
    <p>Text</p>
</div>
<div class="ArticleFooter">
  	<p style="color: #000;">
    A paragraph containing author information
    </p> 

    </div>
    </div>
	</div>

Thanks,
Marty J.

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

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?