|
CSS - Problems With Images
Similar TutorialsI am working on a site and I have a lot of the design worked out but I am running into a problem. The client wants to two columns. one in the center with a background image and a second off to the side as a sidebar. The second div is working as I want it to so far but the problem is placing the background image on the first div and getting the text to appear on top of it. Any help would be appreciated. Code: <html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
img#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}
#content {
position: absolute;
top:75;
left:180px;
z-index: 1;
width: 800px;
height: 600px;
background-image:url('WEROCK-NETWORK-BG2.png');
}
}
#sidebar {
position: absolute;
top:95;
left:1000px;
z-index: 1;
width: 175px;
height: 600px;
background-color: #FFFFFF
}
}
</style>
<!--[if IE 6]>
<style type="text/css">
html { overflow-y: hidden; }
body { overflow-y: auto; }
img#bg { position:absolute; z-index:-1; }
#content { position:static; }
</style>
<![endif]-->
<script language="JavaScript">
function maximizeWin() {
if (window.screen) {
var aw = screen.availWidth;
var ah = screen.availHeight;
window.moveTo(0, 0);
window.resizeTo(1024, 768);
}
}
</script>
<body onload="javascript:maximizeWin()">
<img src="WEROCK-NETWORK-BG.png" alt="background image" id="bg" />
<div id="content">
test
</div>
<div id="sidebar">Sidebar test</div>
</body>
</html>
I only have IE 6, so Im not sure if I have the same trouble in other versions of IE. The site looks great in FF 2 though! View: http://www.angelsar.org/development/funding.php - in FF then in IE6 and you cant miss what I'm talking about. Here is the CSS that came with the template I'm using: Code: body {
background: url(bg.png);
background-repeat: repeat-x;
background-attachment: fixed;
margin: 0 0 0 0 ;
}
div.top {
height: 50px;
background-color: blue;
border-bottom: 2px solid #eaeaea;
color: #fff;
}
div.top h1 {
letter-spacing: -2px;
font-size: 40px;
margin: -5px 0 5px 0;
padding-left: 10px;
}
div.top h1 a { text-decoration: none; color: white; }
div.body {
padding: 10px;
font-family: tahoma;
}
div.left h2, div.right h2 {
border-bottom: 1px dotted;
font-size: 16px;
padding: 10px;
margin-top: -0px;
}
div.right h5 {
margin-left: 10px;
margin-top: 0px;
}
div.left {
background-color: #fff;
padding: 5px;
float: left;
min-height: 400px;
width: 200px;
border-top: 1px solid #808080;
border-left: 1px solid #808080;
}
div.right {
background-color: #fff;
padding: 5px;
min-height: 400px;
margin-left: 220px;
border: 1px solid #fff;
border-top: 1px solid #808080;
border-left: 1px solid #808080;
}
div.footer {
clear: all;
margin-top: 15px;
border: 1px solid #fff;
font-size: 90%;
}
ul.menu {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
ul.menu li {
border-bottom: 1px solid white;
padding: 1px;
}
blockquote {
padding: 10px;
border-left: 1px dotted blue;
}
ul.menu li a {
padding: 5px;
display: block;
text-decoration: none;
border-bottom: 1px dotted;
border-left: 1px dotted;
padding-left: 15px;
font-size: 85%;
}
ul.menu li a:hover {
background-color: #eaeaea;
border-left: 10px solid blue;
padding-left: 6px;
}
p {
padding: 5px;
font-size: 90%;
}
img.rightBorder { float: right; border: 1px solid #808080; padding: 5px; margin: 5px;}
img.leftBorder { float: left; border: 1px solid #808080; padding: 5px; margin: 5px;}
img.border { border: 1px solid #808080; padding: 5px; margin: 5px; }
span.gray { color: #808080; }
span.gray a { color: #808080; text-decoration: none; }
The only thing that doesn't validate is clear: all; under div.footer but even when removing that, it doesn't solve my problem. Any help would be appreciated! Thanks! I am developing a web site, panopticinsight dot com. The header/banner looks fine in Firefox. In IE7 and Opera, the H2 subtitle is left aligned over the globe image. In IE6 content jumps outside of container. Anyone know why there is a shift, and what I can do about it? Style sheet code pasted below: Code: body {
width:800px;
font:0.83em/1.4em Tahoma, Geneva, sans-serif;
color:#CBD4E3;
background:#000 url(images/body_bg.gif) repeat-y top center;
letter-spacing:1px;
margin:0 auto;
}
h1,h2,h3,h4,h5,h6 {
font-family:"Times New Roman", Times, serif;
font-style:italic;
font-weight:bold;
color:#e9df55;
background-color:#000;
}
h2 {
font-size:2em;
}
h3 {
font-size:1.5em;
}
h4 {
font-size:1.25em;
}
a:link {
color:#8090AC;
text-decoration:none;
}
a:visited {
color:#B17F6C;
text-decoration:none;
}
a:hover {
color:#E9DF55;
text-decoration:underline;
}
a:active {
color:#E9DF55;
text-decoration:none;
}
#container {
width:760px;
margin:0 auto;
}
#header {
height:200px;
width:760px;
margin:0;
padding:0;
}
#banner {
height:100%;
width:100%;
color:#cbd4e3;
background:#000 url(images/header_bg.jpg) no-repeat top left;
margin:0 auto;
padding:0;
}
#banner h1 {
font-size:400%;
color:#CBD4E3;
background-color:transparent;
float:left;
display:inline;
margin:0;
padding:70px 0 70px 280px;
}
#banner h2 {
font-size: 12pt;
color: #e9df55;
background-color:transparent;
text-indent: 200pt;
vertical-align: text-bottom;
}
navigate{
color : #105BAC;
background-color : transparent;
height : 20px;
font-size: 100%;
border-top : 1px solid #999999;
}
#navigate ul {
list-style-type: none;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 150px;
margin-right: 0px;
padding: 2px 0 0 0;
}
#navigate ul li {
display: inline;
}
td {
font-family: Arial, Helvetica, sans-serif;
}
th {
font-family: Arial, Helvetica, sans-serif;
}
p {
font-size: 14px;
color: #FFFFFF;
left: 50px;
right: 50px;
}
#main {
width: 660px;
padding-right: 50px;
padding-left: 50px;
}
#footer {
font-family: "Times New Roman", Times, serif;
font-size: 9px;
color: #666666;
height: 100px;
width: 760px;
vertical-align: text-bottom;
text-align: center;
}
#SplashImage {
float: left;
}
.image-left {
clear: none;
margin-bottom: 10px;
float: left;
margin-right: 20px;
margin-left: 10px;
}
.image-right {
clear: none;
margin-bottom: 10px;
margin-left: 10px;
float: right;
}
Im just curious, what are the advantages of using css to import all your images (that arnt dynamic) as apposed to inserting them into your html using the <img> tag? since installing IE7 some of my images are appearing differently, for example the following is not displayed at all when i call it.. PHP Code: .bgright { background: url('images/br_logo.jpg') no-repeat fixed bottom right; } if i removed the "fixed" property, it works. why is this? thanks! I have a div within a div, I set each to 790px wide and a border around the "container". My image is about 2px wider than the "container" width in IE. This is not the problem in firefox. If I shorten the width of the image by 2px, then it looks dumb in firfox. Any insight would be appreciated. Thanks. <body onload="load(); load2()" id="body1"> <table class="td1" cborder=0> <tr> <td class="td1"> <div class="container" id="container"> <div class="banner"> <img id="index1" src="images/index1.jpg"/> </div> ... div.container { position: relative; top: -3px; background-color: white; text-align: left; width: 790px; border-left: 1px solid black; border-right: 1px solid black; border-bottom: 1px solid black; } .banner { position: absolute; width: 100%; left:0px; } Man I love how my site works fine in just about every browser and even across platforms in macosx and windows and yet ie still manages to royally retard my site. http://www.unlimitedgamer.net/ Basically in IE6 there is a huge space between the search (top navigation area) and the header: wew. Second at the end ot the news the 2 last posts, the text in the news decides it wants to travel to the magically empty space to the left and not display correctly. I for one am beyond frustrated with trying to fix these errors, up until now i was on IE7 and just found out all these holes existed, not to mention ie6 was also pushing my navigation to the end of the page because it refuses to adhere to all the other browser standards of width and margin... Any help I am thankful for, cause right now I have an atomic headache http://86.7.141.216/neoxios%202 Read that please. It's all explained there. http://www.bttfpromo.net/tb/ The bottom div...the left child div doesn't want to be the same height as the right child, no matter if I set a height percentage on it or not. Why is that? Also, what can I do to keep IE from raping the upper right divs? Hello all. I really appreciate all the help this board offers. I've finally gotten a decent handle on CSS and have decided I'm DONE with tables. I haven't used them AT ALL in my last several designs. What I don't have a handle on is how to make my designs work with IE. In my past designs, I tested with IE as I built but later I decided, "why build a site to work with a sub-standard browser" and I moved on to test with firefox. As a result, I have to fix the "problems" inherent with IE. Could someone please take a look at my test site and tell me what I need to fix/change in order for it to work with IE? Thanks in advance, Ryan Hey all, I have a small problem. In my webpage stylesheet I have set the <input> tag as having a solid border of 1 in black. Now when I do text boxes this is fine. But when i do checkboxes it looks stupid so how do it so that on some input tags it works and other input tags it doesn't. Thanks in advance. like mostpeople i mademy site using FF and it worked fine till i tried it on IE. the URL is http://wakefieldfhs.co.uk/stu/snap/index.php the inital problem is in F the .main class shows at 100% but in IE it shows only to the scale of the text. also the links are in the wrong position too! any ideas? -----CSS------- Code: a:link {
color:#0099FF;
text-decoration:underline;
font-weight:bold;
font-family :Verdana, Tahoma, Arial ;
}
a:visited {
color:#0099FF;
text-decoration:underline;
font-weight:bold;
}
a:hover {
color:#0099FF;
text-decoration:underline;
}
a:active {
color:#0099FF;
text-decoration:underline;
}
body
{
background-color:#CCCCCC;
font-family: Arial, Helvetica, sans-serif;
}
.header
{
background-color:#000000;
color:#FFFFFF;
width:100%;
height:15%;
}
.links
{
top:10%;
float:left;
}
.status
{
width:30%;
background-color:#FFFFFF;
}
.main
{
background-color:#FFFFFF;
height:100%;
}
.logo
{
float:left;
position:static;
}
.footer
{
background-color:#000000;
width:100%;
height:20px;
margin: 0 auto;
color:#FFFFFF;
bottom:0px;
}
label
{
float: left;
width: 120px;
font-weight: bold;
}
input
{
width: 180px;
margin-bottom: 5px;
font: 11px Verdana, Sans-Serif;
}
#wrapper
{
width: 75%;
height:70%;
margin: 0 auto;
background-color:#FFFFFF;
border-color:#000000;
top:0px;
position:absolute;
left:12.5%;
}
#login-box
{
float: right;
}
The site I'm designing so far renders perfectly in Firefox and Opera, but has a lot of trouble in IE. the address is: http://www.solinari.net/c4e/ As you will see, the navigation box is a smaller width and misplaced in IE, and the links beneath it break the box. The CSS file is at http://www.solinari.net/c4e/style.css I have been working on a new website. All I care is that it works on the latest browsers. I have it looking perfect in Netscape and Safari, but IE has some problems which I can't resolve. See page he Problem Page The problems are the main text area and bottom strip refuse to go 100% across the page. How do you get .PNG files to work? My sub-menus have some weird spacing. If anyone could give me some tips on getting these fixed I would appreciate it. I wish I could just not expect anyone to use IE, ha! Hello, I have a site, http://wwww.catskaraoke.com And all text is underlined, even with inline styles that say "text-decoration:none" I have gone through the style sheets and added "text-decoration:none" to ever class id and tag. In all other browsers, the text is fine, but in IE7 the text is underlined. Why is this? I am going crazy. thanks I am using dreamweaver to put a spry menu bar into a page. Until recently, the page was fine on both firefox and IE, but now, when you access the sub menu, under shop, while firefox displays the second menu in the correct place, the menu in IE displays from the top of the page, not under the original menu. The CSS code for the nav bar.. The website is http://www.skiweb.uk.com Sorry if this is a messy post, its my first!! Many thanks. Code: @charset "UTF-8";
/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/*******************************************************************************
LAYOUT INFORMATION: describes box model, positioning, z-order
*******************************************************************************/
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 8em;
float: left;
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
width: 22.2em;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
position: absolute;
margin: -5% 0 0 95%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;
}
/*******************************************************************************
DESIGN INFORMATION: describes color scheme, borders, fonts
*******************************************************************************/
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
border: 1px solid #CCC;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #EEE;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
background-color: #33C;
color: #FFF;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #33C;
color: #FFF;
}
/*******************************************************************************
SUBMENU INDICATION: styles if there is a submenu under a given menu item
*******************************************************************************/
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/*******************************************************************************
BROWSER HACKS: the hacks below should not be changed unless you are an expert
*******************************************************************************/
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
position: absolute;
z-index: 1010;
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
f\loat: left;
background: #FFF;
}
}
Here is the site http://www dot asylumaccess dot org slash joom I know! I know! I should have been developing my site in multiple browsers simultaneously! But I put together a beautiful site in FF3 and then took a gander in IE6 and HOLY ****! It is just complete crap! I want to wrap my hands around the neck of Internet Explorer and choke it to death. No doubt this is not an uncommon feeling. Please help me put my mind to rest about this mess. My specific problem: Despite having set width and height values in both the CSS and tables, IE6 is increasing the height the two cells in the right column and completely screwing my layout. I have no idea what I can do to fix this besides setting the width and height values! I have to use tables for reasons that are too long to get into right now. What can I do to get the heights of these cells to set properly? CSS (html follows) : Code: /* CSS Document */
.upper-nav li {
display: inline; /* Shows each item side-by-side */
list-style-type: none; /* Gets rid of the bullet points */
}
.upper-nav li a {
color:#fff;
/*font-size:1em;*/
display: block;
float: left;
padding: 0 .25em; /* Provides horizontal separation between menu items */
font-weight:bolder;
font-size:12px;
}
.upper-nav ul {
margin-left:-30px;
}
li {
list-style-type:none;
}
.donate {
border: none;
background-color:#fff;
/*width:370px;
height:102px;*/
text-align:right;
}
.container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
/*height:auto; !important; real browsers */
/*height:100%; IE6: treaded as min-height*/
/*min-height:100%; real browsers */
background-color:#fff;
width:780px;
}
.upper-nav {
width:370px;
height:40px;
background-color:#B3BB1C;
}
.main-content {
width:350px;
background-color:#fff;
padding: 10px;
font-family:"Times New Roman", Times, serif;
height:100%;
}
.mini-col {
width:185px;
height:235px;
background-image:url(../images/mini-col-bg.gif);
background-repeat:no-repeat;
/*background-color:#ccc;
padding-left:10px;*/
padding:0 5px;
font-family:"Times New Roman", Times, serif;
}
#mini-col table {
margin-top:-10px;
}
.mini-col p {
margin-top:-10px;
}
div#side-nav {
position:absolute;
left:0px;
top:400px;
width:195px;
background-color:#FFF;
padding-left:5px;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers overflow:auto;*/
}
#side-nav h3 {
color:#0270af;
font-size:1em;
padding-left:5px;
}
#side-nav fieldset {
border:none;
}
#donate input {
padding: 20px 10px;
}
#col1 {
float:left;
width:195px;
background:#fff;
padding: 10px;
clear:left;
}
#col2 {
float:left;
width:350px;
background:#fff;
padding: 10px;
}
.moduletable_menu, .moduletable
{
color: #000;
}
.moduletable_menu h3 {
border-bottom: 1px solid #FFFFFF;
margin-bottom: 0px;
color:#0270af;
font-size:1em;
padding:5px;
}
.moduletable_menu ul {
margin-left: 20px;
margin-top: 10px;
padding: 5px;
font-size: .9em;
line-height:1.5em;
}
.moduletable div {
padding-left:10px;
font-size:8px;
}
.contentheading {
color: #F47F20;
font-size:1em;
font-weight:bold;
}
.contentpaneopen h1 {
font-size:1.2em;
border-bottom: 1px solid #244223;
/*padding: 10px;*/
}
.contentpaneopen td {
padding:0;
}
.gutter {padding:8px;}
a:link {
color: #0270af;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #0270af;
}
a:hover {
text-decoration: underline;
color: #B3BB1C;
}
a:active {
text-decoration: none;
color: #0270af;
}
img {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: normal;
margin:0;
padding:0;
height:100%;
background: #000;
background-image:url(../images/bkgd.jpg);
line-height:1.1em;
}
.article_column {
color:#666;
}
.container-table {
background-color:#FFF;
margin:auto;
}
.logo{
background-image:url(../images/logo-face.jpg); /*needed for container min-height */
background-repeat:no-repeat;
border:none;
}
.mainlevel-nav {
margin-top:-10px;
}
HTML: Code: <table cellpadding="0" cellspacing="0" class="container-table">
<tr>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td height="400" width="400" colspan="2" rowspan="3" class="logo"> </td>
<td width="390" height="100" class="donate"><jdoc:include type="modules" name="advert1" /></td>
</tr>
<tr>
<td height="40" class="upper-nav" valign="middle" width="370"><jdoc:include type="modules" name="user3" /></td>
</tr>
<tr>
<td rowspan="2" class="main-content" valign="top"><jdoc:include type="component" /></td>
</tr>
<tr>
<td valign="top"><jdoc:include type="modules" name="left" style="xhtml" /></td>
<td class="mini-col" valign="top"><jdoc:include type="modules" name="newsflash" /> </td>
</tr>
</table>
</td>
</tr>
</table>
http://tinyurl.com/5wgx4s The first problem is that in IE the header menu does not go straight across, instead it does down the page like stairs. How do I fix this? Secondly, on the products page, why are the bullet points behind the text? Thanks I have designed a site recently and have two small problems left to sort out. The first is that I have a div full of thumbnails, under some of these I have a small 'new' to show that this image is new. This works fine in Safari/Firefox/Mozilla, and also works in IE 5+ with help of the box model hack, however IE6 posistions the text in the middle of the thumbnails. You can see this at www.marcelbaker.com/portfolio.php A sample of the html for this is Code: <div id="container1"> <div id="float"> <div id="drinks"><a class="selected" href="/portfolio.php?page=1&old="><br /><p class="new">new</p></a> </div> </div> </div> The css for the thumbails is: Code:
#float {
margin: 0;
padding: 0;
list-style: none;
display: inline;
}
#float a {
width: 45px;
float: left;
padding: 0;
margin: 0;
height: 45px !important;
height /**/:45px; /* for IE5/Win only */
}
#float a:hover, #float a.selected {
width: 45px;
background-position: -45px 0;
}
#float a:active {
width: 45px;
background-position: 0 0px;
}
.new {
text-align: center;
font-size: 9px;
color: #BB0000;
text-align: center;
margin-top: 41px;
/* ie5win fudge begins */
voice-family: "\"}\"";
voice-family: inherit;
margin-top: 27px;
}
With each of the thumbnails having its own rule to show its image and create a rollover effect. ie Code:
#drinks a {
margin: 0px 17px 0px 0;
background: url(path/to/image.jpg) top left no-repeat;
margin: 0px 17px 0px 0;
voice-family: "\"}\"";
voice-family: inherit;
margin: 0px 17px 10px 0;
}
html>body #drinks a{
margin: 0px 17px 10px 0;
}
Any ideas on this? My other problem is that on the clients section www.marcelbaker.com/clients.php All the thumbnails appear 4 across a row (if applicable) except for Group M, here it only displays 3 on a line although the html and css is the same for all the client pages. I've check to make sure the images aren't wider or anything like that. This is a real head scratcher, I've been trying to figure this out for days with no luck. I really appreciate your help on these problems. Many Thanks Kieran Well here is the layout.. http://monarkstudios.ca/peter/ body_txt should be at the same top position as body_menu_txt. On IE7 the layout turns out perfect (besides the above problem), but on Firefox the body tag kinda cuts out. And lastly on IE6, it just looks messed entirely... http://monarkstudios.ca/peter/screeen.jpg - IE6 http://monarkstudios.ca/peter/screen.JPG - IE7 http://monarkstudios.ca/peter/screenff.JPG - Firefox I've been trying to solve these problems for quite sometime now, and just gave up. Any help is appreciated. Thanks, Peter |
|||||||