CSS - Php Messing Up Printing

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 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 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 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 have a page that displays text of an article. It's all contained in a <DIV>, of course.

I'd like the "Print" option the allow the user to print out just the article, and not the rest of the crap on the page (ads, navigation, so on.)

I know vaguely that you can have alternate style sheets for printing and other types of display, but how to include just the text in the output?

Hi !

I've read that it's possible with CSS to adapt the visual style of a web page on the output medium.
If I didn't understand that completely wrong, it means that with CSS I can format a String like "Hello World" to give him font size 10 in my browser and font size 20 if i print the page.

Is this correct ?
Does someone of you habe any kind of coding example therefore ?
That would be great

TIA
Gawan

Hello, I was wondering how to link to print a single ID without printing anything else...

thanx=)

Hiya,

This page http://www.magikwebs.co.uk/ranch/indian.html wasn't printing too good so I've set up a stylesheet for print only, and it has improved, but it still doesn't quite look right.

It leaves a big gap on page 2 and misses a line out. It looks 100% fine in Firefox. I guess it's an IE bug. Anyone know what it is and how to avoid it?

Thanks,

John

Hi there...I got a problem with printing my html page..why dosen't follow the setting the my html...When i print this page it prints in portrait..Help me pls..

Code:

<html><head><title>size</title>
<style type="text/css">
  @page { size:landscape; }
</style>
</head><body bgcolor="#FFFFFF" text="#000000">

<p>This page is displayed on your screen as a normal web page.
However, if your browser knows the style sheet properties for page layout,
try printing this file by using the print command in the file menu
of your web browser.</p>

</body></html>

I have decided to develop CSS to style my web pages for printing. So far I am getting the results I desire from Firefox 2.0. However I am having an issue with IE 6. If your open the following page in IE:

cambridgema.gov/cdd/test/faq_test.html

Go to print preview, move to the second print page and scroll to the bottom you will see that the page break splits a single line of text between two printed pages.

Any suggestions about how to stop this?

Thanks

Cliff