SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member tkmoney's Avatar
    Join Date
    Feb 2004
    Location
    Seattle
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry A List Apart rounded corners

    I am working on a site thats using the rounded corner css box's thats is found @ http://www.alistapart.com/articles/customcorners2/ . It looks great on the mac Firefox, IE and Safari. But IE for PC looks really messed up. Here is the url to it: http://www.designsequence.net/mead/index.php?id=people and the css file is here: http://www.designsequence.net/mead/mead_css.css . Anyone know how to fix this?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Sorry but you will need to tidy that page up a bit before anyone will consider looking at it.

    You have half a page mixed in the middle of your code. e.g.

    Code:
     <td background="images/left_repeat.gif"><img name="left_repeat" src="images/left_repeat.gif" width="6" height="445" border="0" alt=""></td>
       <td valign="top" bgcolor="#e4e5e5">			<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Mead Gilman</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="mead_css.css" rel="stylesheet" type="text/css">
    <style type="text/css">
    <!--
    body {
     margin-left: 0px;
    etc...
    If you tidy that up and then make sure you have the doctype at the top of the html and then someone will take a look for you.(You can then tun your code through the validator to check there are no obvious typing errrors - I'd do it for you but I'm going to bed now )

    I suspect that the problems are to do with ie's broken box model (ie5,ie5.5. and ie6 in quirks mode).

    Paul

  3. #3
    SitePoint Member tkmoney's Avatar
    Join Date
    Feb 2004
    Location
    Seattle
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow

    Yea, I know I have a page inside a page. That cuz Im using a php style navigation which loads a page into a page.

  4. #4
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, that "php style navigation" is generating horribly malformed HTML. There should *never* be a whole "page within a page".

    I suspect what you *should* be doing is using a php-based server side include, where the included file doesn't have a doctype, header, and so on.

    As it stands, I'm surprised Firefox and Safari are coping as well as they are.

  5. #5
    SitePoint Member tkmoney's Avatar
    Join Date
    Feb 2004
    Location
    Seattle
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Ok. The file Im including is: http://www.designsequence.net/mead/people.html . Its doing the same thing without the include.

  6. #6
    SitePoint Enthusiast Mikeymoo's Avatar
    Join Date
    Jul 2003
    Location
    St. Albans, Uk
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've had a quick look and the code looks ok, but I did notice something.

    The "topleft" gif appears each time you use a class with "Article" in it, including ArticleBody and ArticleFooter.

    Maybe IE is picking up on the Class Article at the same time.

    Try renaming the sub classes and see if that makes a difference. Sorry haven't got time to dl everything and have a look, I'm supposed to be on Family Time today.

    Mikel

  7. #7
    SitePoint Enthusiast Mikeymoo's Avatar
    Join Date
    Jul 2003
    Location
    St. Albans, Uk
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ignore the above - went mad. I dl'ed your graphics and had a play, compared it to what I had done, and the only real change was the use of relative positioning.

    Try this, it should work.

    I've also added in the div.ArticleLong - this should be wrapped around your ArticleBody div in the html. Then if the article gets too long, you'll get a nice straightline without the top corner.

    Code:
    div.Article {
    	background:  url("images/people_topleftandmain.gif") top left no-repeat;
    	position:relative;
    	margin: 0px;
    	padding: 0px;
      } 
    div.Article h2 {
    	position:relative;
    	background:  url("images/people_topright.gif") top right no-repeat;
    	padding: 5px 5px 15px 10px;
    	margin: 0;
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size: 12px;
    	color: #AE2115;
    	text-decoration: none;
    	font-weight: bold;
    	height: 25px;
    	text-align: left;
      }
    div.ArticleBody {
    	background:  url("images/people_repeatright.gif") top right repeat-y;
    	padding:5px;
    	position: static;
    	margin-top: -2em;
    	position:relative;
      }
      
     div.ArticleBody p {
     	padding:5px;
    	position: static;
    	margin-top: -2em;
      }
      
    div.ArticleFooter {
    	background:  url("images/people_bottomleft.gif") bottom left no-repeat;
    	position:relative;
    	text-align: left;
    	width: auto;
      }
    
    div.ArticleFooter p {
    	background:  url("images/people_bottomright.gif") bottom right no-repeat;
    	padding:8px;
    	margin-top: -2em;
    	text-align: left;
    	width: auto;
      }
     
     div.ArticleLong {
     	background: url("images/people_left.gif") top left repeat-y;
     	margin: 0px;
    	padding: 0px;
     }
    btw - I didn't see an image for the left hand side, so I cropped the topleftandmain.gif to get rid of the top and corner.

    Hope this helps - now back to the family time
    Mikel
    Good decisions come from experience.
    Experience comes from making bad decisions.

  8. #8
    SitePoint Member tkmoney's Avatar
    Join Date
    Feb 2004
    Location
    Seattle
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OMG! Thank you! Stupid IE. Im surprised that A List Apart did not mention this. Im sure many people ran into it. Thanks again Mikeymoo!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •