|
CSS - Wierd Table Behaviour...
Hello,
I am experincing something strange with a basic table enclosed in my content div... The situation: I have basic layout, a header with 2 columns. The main content div holds the left hand side of the page and all works well... except the table. It shoots off the screen and a horizontal scroll bar apears and the table aligns up next to the far left div when viewed in Firefox, but aligns properly when viewed in IE 6. If I enclose the table in a paragraph tag, it displays properly but then fails XHTML validation stating that I have enclosed a block element within a line element. I have gone over and over the table tags, and all seems correct... went to the w3c and mimicked their sample table and have gotten the same prob. Has anyone else experinced this?? DIscovered any solutions?? Help! Thanks. edit... here is the code: the CSS portion: #header { color: #a47716; border-top: .1px solid #e5eca9; margin: 0; padding: 0; height: 100px; background: #ccdd99 url("./headerBG.png") repeat-x; } h1.header, h2.header { font-family:Verdana, Arial, Helvetica, sans-serif; font-size: medium; color: #a47716; border-bottom: none; } #content { padding: 40px 10px 10px 10px; background: #fff; margin: 0px 25% 20px 5px; border-top: 2px groove #87c6ae; border-right: 2px outset #87c6ae; border-left: 2px groove #87c6ae; width: 75%; } #rightCol { margin: 0px; position: absolute; top: 140px; width:20%; right: 0; padding: 30px 10px 10px 10px; } #footer { margin: 0 25% 0 5px; padding: 0; text-align:center; font-size:small; } The XHTML: <!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> <title>the title</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> <!-- @import allTheStyleSheets.css; --> </style> </head> <body> <!-- begin page header --> <div id="header"> <?php include('./incHeader.php')?> </div> <!-- end page header --> <!-- begin tab menu --> <div id="tabMenu"> <?php include('./incNav.php')?> </div> <!-- end tab menu --> <!-- begin main content --> <div id="content"> <table summary="A summary."> <caption> The Caption</caption> <tr> <th id="topic">Topic</th> <th id="issue">Issue</th> <th id="action">Action</th> </tr> <tr> <td headers="topic"><h3>Heading</h3> <p><a href="http://murphyzone.no-ip.com/GCCBFM/news/blog/index.php?p=10">Comment</a></p></td> <td headers="issue">cell content</td> <td headers="action">cell content</td> </tr> <tr> <td headers="topic"><h3>Heading</h3></td> <td headers="issue">cell content</td> <td headers="action"> cell content</td> </tr> <tr> <td headers="topic"><h3>Heading</h3></td> <td headers="issue">cell content</td> <td headers="action">cell content</td> </tr> <tr> <td headers="topic">cell content</td> <td headers="issue">cell content</td> <td headers="action">cell content</td> </tr> <tr> <td headers="topic"><h3>Heading</h3></td> <td headers="issue">cell content</td> <td headers="action"> cell content</td> </tr> <tr> <td headers="topic"><h3>Heading</h3></td> <td headers="issue">cell content</td> <td headers="action"> cell content</td> </tr> <tr> <td headers="topic"><h3>Heading</h3></td> <td headers="issue">cell content</td> <td headers="action"> cell content</td> </tr> <tr> <td headers="topic"><h3>Heading</h3></td> <td headers="issue">cell content</td> <td headers="action">cell content</td> </tr> </table> </div> <!-- end main content --> <!-- begin right column --> <div id="rightCol"> the right column... </div> <!-- end right column --> <!-- begin footer --> <div id="footer"> <?php include('./incFooter.php')?> </div> <!-- end footer --> </body> </html> Thanks again. Similar TutorialsHi, im making a site for a friend but cant seem to understand why the css works fine on one page and the exact same css fails on another. CSS: Code: #topmenu_wow {
background-image: url(images/wow_menu.png);
height: 73px;
width: 1030px;
display: block;
background-repeat: no-repeat;
position: relative;
margin-right: auto;
margin-left: auto;
}
#topmenu_war {
background-image: url(images/war_menu.png);
height: 73px;
width: 1030px;
display: block;
background-repeat: no-repeat;
position: relative;
margin-right: auto;
margin-left: auto;
}
#menupos {
top: 15px;
position: relative;
}
html for the menu: Code: <div id="topmenu_war"><!--this is the one row im changing, topmenu_war (not working) or topmenu_wow (working)--> <span id="home"><a href="index.html"><span id="menupos">Home</span></a></span> <span id="info"><a href="info.html"><span id="menupos">Info</span></a></span> <span id="demo"><a href="demo.html"><span id="menupos">Demo</span></a></span> <a href="#"><span></span></a> <span id="pricing"><a href="pricing.html"><span id="menupos">Pricing</span></a></span> <span id="order"><a href="order.html"><span id="menupos">Order</span></a></span> <span id="support"><a href="support.html"><span id="menupos">Support</span></a></span></div> The working page The bugged page I've tried to put each file in a own folder with a own css (eg /wow/index.html) but no luck. Any help is welcome! Regards - mrsarun Hi, Im not sure what the problem is with my code, but it gives me full borders when I ask for only top and bottom. Here is my CSS. css Code: Original - css Code .logo{ width: 100%; border: 1px solid #FFFFFF; font-size: 32px; } .menu{ width: 150px; height: 320px; border: 1px solid #FFFFFF; text-align: left; } a.menu{ border-top: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF; color: #FFFFFF; width: 100%; }
.logo{
Here is my html of that part. html Code: Original - html Code <span style="float: left"> <div class="menu"> <a href="" class="menu">asdf</a><br /> <a href="" class="menu">asdf</a><br /> <span style="float: left"> <div class="menu"> <a href="" class="menu">asdf</a><br /> <a href="" class="menu">asdf</a><br /> Here is what it outputs. http://blacknine.net/test.html http://xplozive.net/ When you go to that in firefox and rollover one of the links on the left, the content bg color shortens...anyway to fix this? I'm having this issue where 1st paragraph is not indented then all the rest are.... I don't want any indentation.... yet for some reason something is causing it to. How can i investigate what's causing this? Thanks. (btw there's no UL or LI involved in this only P so I have a <h2> tag within a <div id="content"> tag, and I want the h2 tag to be about 115px from the top of the content div. Yet everytime I set the margin, it pushes both the <h2> tag AND the <div id="content"> tag down by 115px. Here's my CSS code: #content{ background: #bd1f1f url("images/body_bkgrnd.jpg"); } #content h2{ font: 34px/30px Helvetica; color: black; margin: 115px 0px 0px 0px; width: 544px; } And here's the relevant HTML: <div id="content"> <h2> Great themes, amazing icons, and the best kit of templates. </h2> </div> <!-- end content --> And here's a picture to show what I mean: [IMG]C:\question.jpg[/IMG] Thanks guys! Hi, I have a realy strange problem that I'm hoping someone can shed some light on. I've been building a new site, nice html and css, but seemingly randomly the layout completely breaks in Firefox 3, IE7/8 is always fine. This only occurs in page sections where there is a block level element (heading, div, para etc) inside of an anchor. <a href=""><h2>Some text</h2></a> Using firebug I saw that the html gets duplicated like so: <a href=""></a> <h2><a href="">Some text</a></h2> - notice that in this one the h2 and <a> have switched places! <a href=""></a> and after a bit of experimenting I found that removing the h2 made it work, and that everything's fine as long as a block level element isn't inside the <a>. In the stylesheet the anchor has display:block; Does anyone have any idea why this is happening, and why in FF only? I've been building sites for 3+ years and have never seen this before! Thanks. Hi, I am trying to finish up on this cubecart re-skinning that I've been left with. Basically, when you add products to the basket the style goes really long. It seems to work in ie7's compatibilty mode, but other than that I am at a bit of a lose as to why its doing it. I am not much of a front end developer, so its all a bit foriegn. I can make my way around a css file, but this has me stumped as I cant see what is causing this! Any help would be greatly appriciated. The page is located at: keylow-design.com/shop Thanks in advance Robert I have a strange problem in IE7 I have a div containing an image (left float) with a second div nested inside the first, containing text which should sit to the right of the image. It looks fine in firefox, chrome and IE8 but in IE7 the text drops down to the bottom right of the image. I cant post links to screen shots sorry any suggestions? I thought that setting properties for a and a:hover like this: PHP Code: a { font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #960000; text-decoration: none; border-bottom: 1px dashed #960000; } a:hover { font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #FFFFFF; text-decoration: none; border-bottom: 1px dashed #FFFFFF; } would apply a dashed bottom border to a standard link (which it does, marvellously). I also thought any other a classes would override this. Such as: PHP Code: a.nav { font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #960000; } a.nav:hover { font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #FFFFFF; text-decoration: none; } Which doesn't work (until I set a border-bottom property of 0). Is there a way to get around this so I don't have to set a 0 bottom-border on all other link types? I have a basic 2 column layout with a header and the columns reprezented by two floated divs but on IE I'm experiencing some weird behaviour with the menu. To be precise the menu's background and content is not showing up at pageload and I have to hover some of it's elements or resize the window, or bring another window above IE's window and then the hidden elements magically appear. Is this some common bug? And more important: is there a fix? You can see my example at the following link -> http://www.link7.ro/misc/css-stuff/bug1/test.html Thanks in advance. Hello All, I have created a grid using divs. There is a main div acting as a table, this contains divs acting as rows and these contain divs acting as cells. The finished thing resembles an HTML table. When developing the grid, I managed to make it work correctly in all browsers and was happy with the result. Now that I have put the grid on a live server and there is a slight lag loading the page, I am having problems in FF3 and IE7. When I first view the page, the divs are not sitting in a nice block, some of the rows end halfway through and new rows are started. If however I click refresh, the problem fixes itself. Also the alignment is random, I can view the same page twice in the same browser and get different results. The first thing I thought was that there must be something wrong with my coding, but the HTML and CSS never change. I cannot send a link to the page as it is on an intranet, also the code is quite long so I did not include it but I will if necessary. I have looked around on the net for similar problems and have found one or two mentions but no solutions. Has anyone else had a problem like this and solved it? Any help would very much be appreciated. Thank you, Aaron. I can't get this page right. http://ortho-paloalto.hoozhosting.c...te/newsite.html What I'm trying to do is create a menu at the top in the center #window div. If I add width: 25% to the following, the menu is properly spaced in IE, but block atributes are lost in FF. If I remove the width: 25% from the following the menu is spaced properly in FF, but lost in IE. #submenu li a { } #submenu li a:hover { } Regardless of the same size tabs for the menu's described above the links stopped working in FF. I'm trying to have the menu at the top be width: 33% and the sub menu 25% and both centered. Eventually I'd like to determine a way to customize each of the menu color's but I think the formatting and placement is more important at this point. Please help, I've just recently started using css and have limited experience. Any help is appreciated. Thank you, Dave discovered whilst working on asp where i use '' for comments and tried to comment out a line in the css file the same way... this should technically work by breaking the whitespace and create an invalid rule but IE yet again responded differently... Code: ""item:attribute; ''item:attribute; //item:attribute; ignored by opera 7.54 netscap 7.02 firefox 1.0.4 read by IE 5.01 IE 5.5 IE 6.0 "item:attribute;" 'item:attribute;' ignored by all read by IE 5.01 interested to see how the mac browsers respond but it looks like a better IE5.0 inline filter than Code: _item /**/: /**/attribute; ! Hi all, I have the following div definition: Code: .adddet {
position:absolute;
top:50px;
width:450px;
right:5px;
padding:5px;
border:1px solid black;
background:white;
}
in my stylesheet.css and the following block of code in my php script: Code: <a name='details'> <div class='adddet'> <b>Your details:</b><br><br> <form name=login action='newcart.php#details' method=post> E-mail address: <input type=text name=email> <input type=submit name=act value='I am a new customer'><br> I am a returning customer and my password is: <input type=password name=pass> <input type=submit name=act value='Go'></form> <small><a href='javascript:showrem();'>Forgot password?</a></small> </div> What I want is for the link 'Forgot your password?' to appear next to the 'Go' button at the bottom of the div. This is does if it's just plain text without the anchor tags. As soon as I add the anchor tags (as above) the text leaps to the top of the div in (seemingly) it's own box with a 1px black border around it. To see a demonstration, have a look at www.pennymead.com/demo.php Full source for the above page is below: 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> <link href="stylesheet.css" rel="stylesheet" type="text/css" /> </head> <body> <a name='details'><div class='adddet'> <b>Your details:</b><br><br> <form name=login action='#' method=post> E-mail address: <input type=text name=email> <input type=submit name=act value='I am a new customer'><br>I am a returning customer and my password is: <input type=password name=pass> <input type=submit name=act value='Go'></form> <small><a href='javascript:showrem();'>Forgot password?</a></small> </div> </body> </html> One final note is that this only seems to happen in Internet Explorer, certainly Google Chrome shows the text in the expected position. Many thanks in advance for any help you can give with this. Regards, vsource. I am currently developing a website, on which I overlay a copyright message onto images with 50% opacity for the message, using the following CSS: Code: .message{
width:100%;
text-align:center;
z-index:5;
color:#33FFFF;
margin:0px;
padding:0px;
position:relative;
top:-18px;
background-color:#000;
opacity:.50; filter:alpha(opacity=50); -moz-opacity:0.50;
}
This works fine, and gives me exactly the result I want. HOWEVER, now I want to overlay an absolutely positioned div for a pop-up form. Where this overlays the semi-opaque region, In IE7 the semi-opaque region is visble, as if it had a higher z-index. It works fine in FireFox Chrome and Opera Any ideas ? Hi, I'm styling a form which has been marked-up as a definition list with labels inside <dt> tags and fields inside <dd> tags. Here is the CSS I am using to make it look nice as a two column layout: Code: form#requestinfo {width: 410px;}
form#requestinfo dt {clear: left; float: left; width: 95px; }
form#requestinfo dd {width: 305px; margin-left: 105px; padding: 4px 0 4px 0;}
It's looking good in firefox, but IE 6/WIN makes a mess of it - giving a full 105px left margin to the <dd> rather than allowing the <dt> to sit on top of its margin. Any ideas how this can be solved? Thanks. Hi, I'm noticing a different behaviour between firefox and explorer regarding de margin attribute, and I can't explain it applying the well known box model difference. Here is the css code: Code: div#main {
margin: 10px auto 20px auto;
width: 1001px;
border: 1px solid #000000;
}
div#left {
float: left;
width: 150px;
}
div#content {
width: 600px;
margin-left: 160px;
background-color:#0033CC;
}
Here is the HTML: Code: <div id="main"> <div id="left">left</div> <div id="content">content</div> </div> What I get in firefox is the expected, the content div is exactly at 160px distance of the inner part of the main div border. However in explorer the distance is 163px?? According to the box model difference, if we consider that in explorer the width includes the border, the distance should be 161px but not 163px. Any ideas? Caste Hey everyone, I ran into an odd problem, I've implemented a workaround and got the desired result but I'm still confused as to why the proper solution didn't work. Here is what I was trying to do. I'm working on a web based application and the previous coders were ****, which is why they're all gone now, there are soo many bugs that require entire rewrites that we're just hacking them away piece by piece. Anyway, one thing they do is instead of going to the database whenever they need information, they cache all of the information in the ASP engine for the page that is being loaded. As you can imagine this results in some long load times. So they implemented a loading screen. Basically they loaded an iframe with an src of about:blank and within it they had a div and some tables with gif images. And we wanted to see the page that the loading screen was called from with a transparent png image making everything seeming to be greyed out using a transparent png. What I did was set the iframe(class="shimFrame") allowtransparency=true and set .shimFrame body tag style property background-color:transparent; Once that was done I gave the loading div which was 100% height and width to have the transparent image background. It worked, but behind the image I still saw the iframe white background. I remove the iframe and everything works as I expected but I don't know why the iframe allowtransparency=true didn't do what I wanted it to do. Maybe I misunderstood what it does, I figured it would let you see past the iframe background and see the page that the iframe was a part of. Anyone have any ideas? I don't know if this should be in css or html since it could be something missing from either. Also the web app is currently only supported under IE but in version 2 it will be properly designed(there are no design docs for this app) and it will be browser independent, since some of the clients we're looking to get currently require firefox for some of their other software. I'm more or less trying to find the reason why the possible proprietary property didn't work as documented. In advance, I'd like to say that I appreciate the assistance from people on this site. I'm laying out a site with a three-column layout. The right <div> floats to the right, and the left <div> floats to the left with the middle content "flowing" to the top in between the two. I'm using strict xhtml. Both the xhtml and the css validate properly with no warnings. In Firefox, Opera and Safari, the layout behaves as I would expect. However, with IE7, the left div behaves very unexpectedly, as though IE7 is causing it to use fixed positioning. If you open the site in IE and manually resize your browser window by dragging the right-hand side back and forth horizontally, you'll see how the left div stays in place. I can't figure out the cause of this strangeness. I've put the index page temporarily online for anyone to take a look at, and I'll append the code right after this post. The site is www [dot] MeInShape [dot] com Again, thanks in advance. Edited because I accidentally said "absolute positioning" when I meant "fixed positioning". hello! My name is Marco, I'm italian, I hope nobody will be hurted by my english. Consider this code: Code: <html><head><style>
body
{
text-align: center;
}
#wrap
{
width: 100%;
background: yellow;
height: 400px;
}
#inside
{
width: 800px;
position: relative;
margin: 0px auto;
background: red;
}
</style></head><body>
<div id='wrap'><div id='inside'>
try to downsize the width of the window! what is the yellow background doing?
try to downsize the width of the window! what is the yellow background doing?
try to downsize the width of the window! what is the yellow background doing?
try to downsize the width of the window! what is the yellow background doing?
try to downsize the width of the window! what is the yellow background doing?
try to downsize the width of the window! what is the yellow background doing?
try to downsize the width of the window! what is the yellow background doing?
try to downsize the width of the window! what is the yellow background doing?
try to downsize the width of the window! what is the yellow background doing?
try to downsize the width of the window! what is the yellow background doing?
try to downsize the width of the window! what is the yellow background doing?
try to downsize the width of the window! what is the yellow background doing?
try to downsize the width of the window! what is the yellow background doing?
try to downsize the width of the window! what is the yellow background doing?
try to downsize the width of the window! what is the yellow background doing?
try to downsize the width of the window! what is the yellow background doing?
try to downsize the width of the window! what is the yellow background doing?
</div></div>
</body></html>
if you try to downsize the width of the browser window (to 100px, for example) the yellow background will move to left I hope the problem is clear exposed...thank you |
|||||||