|
CSS - Problem With Page Layout That Doesn't Display Correctly In Mac Browsers
Hi
I wonder if anyone can help. I've been trying to tidy up the layout of my home page, and I'm pretty confused by the way that the header is behaving in both Firefox and Safari - the browsers I use on my Mac. I've got screen shots which show it looking good on most Windows browsers, but for some reason, all the text is bunched up at the top when I look at it on the Mac. This is a link to the page: http://www.independentliving.co.uk/index1.shtml And this is the relevant bit of the stylesheet: div#header { background-image: url("header.jpg"); background-repeat: no-repeat; color: #FFFFFF; margin-left:auto; margin-right:auto; margin-top: 0; width:780px; height: 200px; margin-bottom: 10px; font-size: 0.8em; } #header .welcome { text-align: left; width: 700px; padding-top: 90px; padding-left: 20px; padding-right: 20px; color: #003366; font-size: 0.8em; } p.welcome { text-align: left; width: 700px; padding-top: 90px; padding-left: 20px; padding-right: 20px; color: #003366; font-size: 0.8em; } #header .slogan { text-align: left; width: 700px; padding-left: 20px; padding-right: 20px; color: #003366; font-size: 0.8em; } p.slogan { text-align: left; width: 700px padding-left: 20px; padding-right: 20px; color: #003366; } If anyone has any ideas, I'd be really grateful. I know Mac is a minority platform, but as it's the one I use, I'm pretty keen to get it working! Thanks Frances Similar TutorialsHey, A while back i wanted to make a personal PHP based addressbook, just for my own use, very simple without much layout. But later i decided to expand the functionality and layout a bit. Now i ended up with a nice result (in my opinion) however only for Firefox in the resolution 1024x768. Most of the problems have to do with the positioning of the div's of which my page consist. The page is divided like this: Without borders between the div's. This is how it looks in Firefox which im ok with: http://img529.imageshack.us/img529/9766/ffkg1.jpg And it looks like this in IE: http://img371.imageshack.us/img371/2332/iezn0.jpg I used the following classes for the divs (i only post the relevant parts of the classes that has to do with the positioning): -EDITED- deleted the css code in this post. The new updated code is in my new post. I've spented alot of time to get the divs in the right position just for Firefox when i started this site. Can anybody help me with this? I want to specify everything in percentages to make it look right in all resolutions , however this doesnt seem to work yet but i first want to know how to make my pages look good in IE too. thanks in advance. http://24.166.186.237/_elementalcon...themes/default/ thats where it is, in FireFox it looks fine [although there is a bug if the contents smaller than the navigation, the navigation floats over the bottom border] and I would prefer the navigations height 100%. the problem in IE is obvious, the content div aligns itself under the bottom of the leftcolumn div. the site should be up 24/7 unless my wireless dies overnight or something, in which case it will work later. Please help thanks for reading. Oh yeah one more problem in all browsers Ive tried, the layout itself isnt positioning where I want it to, it's going all the way right, if not farther so theres a horizontal scroll bar . I cant figure out how to center it. I heard a paragraph text-align: center; containing the main div works in some browsers... I use the same css for all page, but one of them doesn't show sidebar and push down the footer about 100px Code: http://elsoszabadmagyarkormany.com/torveny-szavazasok/ Anybody can help me? OK, So I have put together what I thought was a reasonably basic xhtml page outline. I'm using a Win2k box. I checked it in Opera 7 and IE6 and it looks fine (more or less). I've also validated the xhtml and css codes. However, when I look at the page in Netscape 7.1 or Firefox, the menu kind of hangs a bit in limbo. Otherwise the rest of the page render's fine. I've included my code below. Does anyone have any suggestions since it's likely that if it doesn't work in Netscape/Firefox, it won't work in many other browsers either. Thanks! Shawn PS I'm not saying there is anything wrong with Firefox/Netscape, but likely my code URL: http://www.raisetheratesottawa.org/xhtml/ ===== CSS ===== HTML { PADDING-RIGHT: 0px; MARGIN-TOP: 0px; PADDING-LEFT: 0px; BACKGROUND-COLOR: #FF99CC; MARGIN-BOTTOM: 20px; PADDING-BOTTOM: 0px; COLOR: #000000; PADDING-TOP: 0px } BODY { PADDING-RIGHT: 0px; MARGIN-TOP: 0px; PADDING-LEFT: 0px; BACKGROUND-COLOR: #FF99CC; MARGIN-BOTTOM: 20px; PADDING-BOTTOM: 0px; COLOR: #000000; PADDING-TOP: 0px } #upper { width:700px; margin:0px auto; text-align:left; padding: 0px; border: 5px solid #FFFFFF; BACKGROUND-COLOR: #000000; PADDING-RIGHT: 0px; MARGIN-TOP: 0px; PADDING-LEFT: 0px; MARGIN-BOTTOM: 10px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px } /* Horizontal nav */ #menu { width:700px; margin:0px auto; padding: 0; } #menu ul { border: 0; margin: 0; padding: 0; list-style-type: none; text-align: center; clear: left; } #menu ul li { display: block; float: left; text-align: center; padding: 0; margin: 0; } #menu ul li a { background: #000000; width: 175px; /* was 'height: 2em; */ height: 24px; padding: 0; /* was 'margin: 0 0 10px 0; ' this affects the margin between upper menus*/ margin: 0 0 0 0; color: #FF0000; text-decoration: none; display: block; text-align: center; font-weight: bold; letter-spacing: 1px; /* was 'line-height: 2em; */ line-height: 24px; /* was 'font-size: x-small; ' */ font-size: 10px; font-size: 10px; /* was 'FONT: 8px Verdana, Arial, Helvetica, Sans-Serif;*/ } #menu ul li#one { width: 46px; } #menu ul li#two a { width: 154px; } #menu ul li#three a { width: 105px; } #menu ul li#four a { width: 85px; } #menu ul li#five a { width: 56px; } #menu ul li#six a { width: 57px; } #menu ul li#seven { width: 147px; } #menu ul li a:hover { color: #000000; background: #FF0000; } #menu a:active { background: #c60; color: #fff; } #content { width:700px; margin:0px auto; text-align:left; padding:0px; border:5px solid #FFFFFF; background: url(/xhtml/graph/rtr-logo-bk.gif) #FF99CC; } ====== XHTML ====== <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test</title> <link rel="stylesheet" href="graph/rtrcss2.css" type="text/css" /> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Language" content="en-us" /> <meta name="ROBOTS" content="No Index" /> <meta name="Copyright" content="Copyright (c) 2004" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="MSSmartTagsPreventParsing" content="true" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <link rel="help" href="about.php" title="Site info." /> <meta name="Rating" content="General" /> <meta name="revisit-after" content="2 Days" /> <meta name="doc-class" content="Living Document" /> </head> <body> <div id="upper"> <div id="header"> <img src="graph/top-right2.jpg" width="700" height="78" alt="" /> </div> <div id="menu"><ul> <li id="one"> </li> <li id="two"><a href="link1.php" title="Link 1.">Link 1</a></li> <li id="three"><a href="link2.php" title="Link 2.">Link 2</a></li> <li id="four"><a href="link3.php" title="Link 3.">Link 3</a></li> <li id="five"><a href="link4.php" title="Link 4.">Link 4</a></li> <li id="six"><a href="link5.php" title="Link 5.">Link 5</a></li> <li id="seven"> </li> </ul></div> </div> <div id="content"> <p>Here is some text</p> <p>Here is some more text </p> </div> </body> </html> The following code works in most browsers but not so well in IE, there seems to be an extra block of css shading in the last box in the row. this is what we really want removed. has anyone got any ideas how the issue IE can be fixed. thanks in advance for your help. Code:
<style type="text/css">
<!--
.menucontainer { background:#799BD9; margin:0 5px;}
.menurtop1, .menurbottom1{ display:block; background:#125892; }
.menurtop1 *, .menurbottom1 *{ display: block; height: 1px; overflow: hidden; background:#799BD9; }
.r1{ margin: 0 5px}
.r2{ margin: 0 3px}
.r3{ margin: 0 2px}
.r4{ margin: 0 1px; height: 2px }
a.one:link { color: #000; }
a.one:visited { color: #000; }
a.one:hover { color: #fff; }
a.one:active { color: #000; }
a.one { text-decoration: none; }
h1 { text-align: left; font: small tahoma; font-size: 12px; font-weight: bold; margin: 0 0; padding: 5; }
h2 { text-align: left; font: small tahoma; font-size: 12px; font-weight: bold; margin: 0 5; padding: 5; }
-->
</style>
<style>
<!--
A {color:#000000; font-weight: normal;}
A:hover {color: #0066FF; font-weight: normal;}
-->
</style>
<body bgcolor="#003399">
<table width="100%" style="border-collapse:collapse;">
<tr>
<td width="0%" height="21">
<div class="menucontainer" align="center">
<b class="menurtop1"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<table width="100%" style="border-collapse:collapse;" dwcopytype="CopyTableColumn">
<tr>
<td NOWRAP> <div align="center"><a href="http://<?=$siteurl;?>/?ac=a" STYLE="text-decoration: none"><font color="#FFFFFF" face="Tahoma"> l1</font></a> </div></td>
<td NOWRAP> <div align="center"><a href="http://<?=$siteurl;?>/members/index.php?ac=s" STYLE="text-decoration: none"><font color="#FFFFFF" face="Tahoma"> l2</font></a> </div></td>
<td NOWRAP> <div align="center"><a href="http://<?=$siteurl;?>/members/index.php" STYLE="text-decoration: none"><font color="#FFFFFF" face="Tahoma"> l3</font></a> </div></td>
<td NOWRAP> <div align="center"><a href="http://<?=$siteurl;?>/?ac=f" STYLE="text-decoration: none"><font color="#FFFFFF" face="Tahoma"> l4</font></a> </div></td>
<td NOWRAP> <div align="center"><a href="http://<?=$siteurl;?>/?ac=c" STYLE="text-decoration: none"><font color="#FFFFFF" face="Tahoma"> l5</font></a> </div></td>
<td NOWRAP> <div align="center"><a class="bm" title="link me" href="http://<?=$siteurl;?>/?ac=b" STYLE="text-decoration: none"><font color="#FFFFFF" face="Tahoma"> l6</font></a> </div></td>
<td NOWRAP> <div align="center"><a href="http://<?=$siteurl;?>/?ac=s" STYLE="text-decoration: none"><font color="#FFFFFF" face="Tahoma"> l7</font></a> </div></td>
</tr>
</table>
<b class="menurbottom1"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div>
</td>
<td width="5%" NOWRAP><div align="center"><font color="#FFFFFF" size="2" face="Tahoma">123456</font></div></td>
</tr>
</table>
I'm having troubles figuring out how to lay out the beginnings of a simple page using div's and css. The html is simple. I have a container that I want to be horizontally centered but I want it to stretch from the top to the bottom of the page. Inside this container div, I want a header div containing a header and an image next to each other. Underneath that div I want a nav bar. The problem is that the nav bar and the header bar are on top of each other AND the container won't stay flush with the top and bottom of the browser window unless I use huge negative margins. Code:
<body>
<div id="container">
<div id="header">
<h1>Header</h1>
<img src="images/myimage.jpeg"/>
</div>
<div id="navbar">
</div>
</div>
</body>
Code:
@charset "utf-8";
body {
background-color: #022000;
}
#container {
background-color: #0B400A;
height: 1000px;
width: 970px;
margin-right: auto;
margin-left: auto;
margin-top: -20px;
margin-bottom: -20px;
}
#container #header img {
float: right;
}
#container #header h1 {
font-size: 100px;
color: #FFFFFF;
float: left;
}
#container #navbar {
background-color: #022000;
height: 200px;
width: 920px;
border: thin solid #33FF00;
margin-right: auto;
margin-left: auto;
margin-top: 100px;
}
I've converted my site to a css layout http://www.mrhodges.net and it woks well for the browsers I've checked except ie5 for mac. On this browser it drops the center column below the two floated side columns. Now I know that the browser is no longer supported and all that but wouldn't you know... I work for a school board where almost all of the machines are macs and they are running os9 and you guessed it mac ie5. So of the miniscule number of people running this browser I'm smack dab in the middle of most of them. Consequently I need to figure out how to get my page to display properly as I'd like to use the template to put together the schools's web site. What is the best solution for this problem? I'd rather not have to write two sets of pages and redirect using javascript. I've been searching this for about 4 hours today, and have yet to come across a good answer. Right now my site looks fine in Firefox, IE6, IE7, and Opera. However, it does not validate because I'm using the _margin-top and .margin-top tricks to force the bottom line of links in IE. My site can be viewed at startdesigning.net (not allowed to post link because I new, I guess) and the css in question can be found at startdesigning.net/style.css - again, can't post a link. If anyone has any suggestions to validate without changing the appearance, I would love to hear them. Thanks, Andrea I have a Wordpress site. The layout has some complex elements, but strangely the one thing that doesn't work is the background-color that I am setting using the "body" selector. It works great on Firefox and IE (imagine that!) but not on Safari or Chrome, which are Webkit-based. It is supposed to have a gray background, but those two browsers just show the default white. The following is the code I'm using in the body selector.. not much places where something could be going wrong. css Code: Original - css Code body { margin: 0px; padding: 0px; background-color: #333333; }
The link to the page is he http://montanlaw.com I don't understand why things aren't working... it seems to me like background-color should be a very well-supported property that shouldn't have much variance between browsers. Anyone have any tips? Note: I tried validating the code to see if there was an error there - however, it's all valid except two little (unrelated) things that I could easily fix if I needed to. Thanks in advance for any help, chip19 When using the following code, the "Design" preview does not display correctly within Dreamweaver MX 2004, but it does display correctly in all browsers. Does anyone know if this a problem with Dreamweaver or my CSS code. Update:- removing "position:absolute" from #infoPanel fixes the design preview problem, but this isn't really a solution, as I need to position absolutely. The only problem I've got is the design preview in Dreamweaver. I am happy with the final browser output, but the layout is awful within Dreamweaver. Thanks Matthew Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Welcome</title>
<style type="text/css">
<!--
#infoPanel{
position:absolute;
width:760px;
height:100px;
border-style:solid;
border-width:1px;
}
#infoPanelDetails{
margin: 10px;
position:absolute;
width:480px;
}
#infoPanelLink{
margin:10px;
position:absolute;
width:240px;
left:480px;
text-align:right;
}
-->
</style>
</head>
<body>
<div id="infoPanel">
<div id="infoPanelDetails">
<p>Some detailed text here.</p>
</div>
<div id="infoPanelLink">
<p><a href="http://www.wherever.com" >www.wherever.com</a></p>
</div>
</div>
</body>
</html>
well i have totally redesigned my orginal page due to problems with IE browser-- i am now using a two column template and have copied code exactly-- had both XHTML and CSS verified with the W3C validator and they both check out to be ok-- the page is NOT showing up properly at all-- i am using FIREFOX as browser and i am wondering if i have now traded one problem for another i would sure appreciate it if someone would just go and look at page to see if it shows up right in another browser- THE PAGE also here is the url for the CSS CODE here is link to how page is supposed to look-- CORRECT VIEW if the page is not right in FOX does anyone know a work around to make it right?????? UGH UGH THIS IS SO FRUSTRATING thanks in advance-- Hi, I'm working on a website for a church and we're near completion, but I'm having trouble getting the site to display properly in IE7 on Windows XP and a few other browsers according to browsershots.org. CSS and XHTML both validate at w3c.org. I've ripped this thing apart and put it back together with no luck. The really weird thing is the Home page looks fine, but in the rest of the pages the body content gets pushed below the left and right navigation bars. Is it a CSS float problem? Margins or paddings??? Home page: Looks OK in IE7, at least on my machine - http://www.stlukeslutheran.com/index_temp.php Ministry page: Content is pushed to bottom of page - http://www.stlukeslutheran.com/mini...ns_ministry.php The CSS files are at http://www.stlukeslutheran.com/css/main.css and http://www.stlukeslutheran.com/css/common.css. Would anyone be willing to take a look? Thanks in advance. I'm new here, but am hoping someone might have an answer to my question... I'm working to develop a site that displays press clippings for a company. The heavy lifting is done using PHP, but CSS is used for the positioning. Here's the link: http://lutzandpatmos.com/beta/press.php The relevant CSS file can be found at: http://lutzandpatmos.com/beta/lutzandpatmos.css There a number of magazines with press coverage. When you click on a link to a magazine title, the coverage from that magazine is made available below the rest of the links. If there is one clipping, the cover of the magazine is shown and that clipping is displayed. If there are multiple clippings, the user must click one of the covers to access that content. Additionally, covers are displayed with an image of a date below them. To keep the covers and dates together and centered, I've placed them in a <div> tag. My real problem is this: I'm developing on a PC, but the client is on a Mac, viewing with Safari. Therefore, the ultimate solution must work on Safari (although, unfortunately I don't know which version). The covers are "stacking" one above the other when viewed through Safari. The correct behavior - which I've tried to specify through use of the css {display: inline } rule would be for these covers to line up left to right, and if there are too many, for them to begin a new line when they reach the end of the table cell. I'm wondering if anyone can help me figure out a way to code the CSS such that the behavior intended (as seen in IE) would function correctly in Safari. Baring a CSS fix, are there other methods that you can think of to address the problem? I've considered using the nowrap tag to keep the covers from stacking, but this would be a problem when there are more than 6 or so covers, which occurs in a few instances of the press coverage. Please let me know whether I need to supply additional information relevant to figuring this thing out... If no one has ideas, can anyone point to other resources that might be helpful in solving this issue. It's a substantial problem for me, and any all help will certainly be highly appreciated. Thanks. Ryan Hello all, I am having trouble getting my site menu to display properly in chrome and safari. In chrome and safari the menu link are raised higher up in comparison to firefox and IE. Here is my site: Well I guess I can not link my site, but hopefully someone can still help me. Here is my code: Quote: /* Tabs ==================== */ #homepagetabs { border-bottom: none; margin-bottom: 10px; padding-left:170px; height:51px; background:transparent url } #homepagetabs li { display: inline; list-style-type: none; margin-top: 14px; border: none; border-bottom: none; float: center; line-height: 14px; margin-right: 8px; text-decoration: none; cursor: pointer; color:#fff; background: none; font-weight:bold; font-size:12px; } #homepagetabs li.currenttab { margin-top: 14px; background: none; border: none; border-bottom: none; font-weight:bold; color:#fff; font-size:12px; text-decoration:underline; } #options_69 th { font-size: 100%; } An important part of my design is the background image. I have tried many different things but cannot seem to solve this. I have two options: Option 1: One placing the image in a tag within the body. Results where pretty good except in IE 6 the content is displayed under the image. You can see the effect of option 1 on this portion of the site: http://woodysfireworks.nl/w/index.html example Code:
/*option1 background image*/
img.bg {
background-color:#000;
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
overflow:hidden;
/* Set up positioning */
position: fixed;
z-index:0;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}
Option2: I placed the image in the style sheet and then included a class and id in the tag. Here the images get blown up in all version of IE. example Code:
/*option 2 background image*/
#start{ background:url(images2/426.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";}
I would really appreciate some insight. I am pulling my hair out. Thanks Hi, I need a 2 column layout where the left column is for the menu (vertically stacked) and the right side has the content. Specifically I need a 2 column layout that is: 1) Cross browser (FireFox and IE 6) 2) BOTH columns to be at least 500px in height, but if the content in the right column expands beyond that height... .then I want both columns to expand, not just the right or content containing column, but BOTH columns to expand Here's where I'm at now: http://www.alexwenttochina.info/template.php you can see that when the content overflows... neither the left nor right column expand. Arrrrrgggghhhhh My current CSS for the sample site is: body{ background: #32331c; } #wrapper { width: 790px; margin: 0 auto; height: 100%; } #left { width: 220px; float: left; height: 500px; background: #a2c4ca; background-image: url(images/peace.gif); /*height: 100%;*/ } .left-container { margin: 10px; margin-bottom: 0; /* IE6 pushes footer down without this */ /* height: 100%; */ } #right { width: 680px; /*width: 80%;*/ background:#cae688; float: left; height: 500px; /*height: 100%;*/ } .right-container { margin: 20px; margin-right: 10px; margin-bottom: 0; /* IE6 pushes footer down without this */ } .clear { clear: left; } Any help would GREATLY be appreciated!! I can't tell you how frustrating CSS is. Every piece of code I see has as many work-arounds as it does actual style coding. Tags mean nothing because you never know if it works or doesn't, or how it works. It shouldn't be this difficult, you can tell it was piece-mealed together and every browser has it's own way of doing things. Thanks Vmuisc Hi all, I've been struggling with a basic layout question for a while and I could use some direction as a recent CSS convert. Basically I have a two column layout contained within another div (for borders and colors). What is happening is that my container only grows vertically to the size of the right column regardless of the size of the the left. Is there a way to "attach" the containing div to which ever column is the tallest? I've setup a test page to show the problem. This occurs in I.E. 6.0 and Firefox 1.5.x (Windows and Unix). Thanks very much for any pointers. Hello.. I've been working on this site for my Daughter using Wordpress, I've mashed about the CSS, Modding a template for the desired look for the site. I've tied validating it and it brings up a couple of strange comments about the </body> and </html> closing tags, I presume this is why IE7 is having problems displaying the page. Firefox doesn't seem to have an issue at all. I was hoping somebody could take a look at the source with a fresh set of eyes and let me know what is wrong, I've spent hours working on this and can't see it for the life of me. I'm sure it's something simple, I know I had an issue one time where a <P> tag wasn't closed and stopped the whole site being displayed... thanks. blog.mirana[dot]co[dot]uk |
|||||||