|
CSS - Table / Stylesheet Problems
Hi guys,
Having some problems with this site -- it validates ok but as you will see the tables are displaying way off. In Firefox -- the second td with the text is displaying underneath the first td instead of alongside it in IE -- the second td has a huge indent before the text, and the list isnt showing the bullet points It's frustrating me hard as it was working the other night, and now I open it again something is wrong and i've no idea what I changed. Any ideas? ps hi i am new here! edit: um ok it wont let me post the url since i am new. its castworks dot com dot au forwardslash template_castworks dot html if anyone can actually be bothered to look at that Similar TutorialsQuote: Dan Cederholm of SimpleBits: It's important to note that the cascading effect of CSS still applies, and alternate style sheets work just like any other style sheet, in that only common rules are overridden when the alternate styles are active. So if we had layout, positioning, and other site-wide rules in default.css that weren't repeated in the alternate style sheets, those default rules would still work. I'm making a site that has a default stylesheet with a fixed layout and an alternative one with a fluid layout. The problem I'm having is the alternative sheet not inheriting css from the default stylesheet even though the rules are not overridden. At the moment, my alternative stylesheet is an exact copy of the original (everything included) with only 3 width values changed to percentages. Theoretically, I should be able to only include these three rules alone in the alt sheet, as rules are carried over from the default sheet unless overridden. However, when I do try to reduce the alt sheet to just: Code: #container { width: auto; }
#main { width: 65%; }
#navbar { width: 30%; }
all unincluded formatting is lost. Am I doing something wrong? Cheers, Sam. I have a very strange problem. My firefox is ignoring the changes I made to the style sheet. I have this in my webpage and the style.css file location is right (one directory up). <link href="../style.css" rel="stylesheet" type="text/css"> Because it's ignoring my new changes, I deleted everything in my style.css file, and the page still displays as though the file exists. However, if I delete the above line, then the page will display without any style. IE is loading with the changes I made though. I have also checked my stylesheet with the W3C css validation and it has no error. So, any body know why this is happening? http://richgirlstore.com/xcart/home.php hmm. what might cause this in IE ? works perfect in Firefox I'm so excited! I recently decided to try again (the third time) to see if I could convert my horrid table layout to divs. I was finally able to make something reletivly good in most browsers, but I am still having alot of browser-related problems! Normally I would have given up by now...but i found that my table layout was at 28 seconds over 56.6 ( :O ) and once i converted it it was only 3 seconds over (double :O ) Anyway, pretty much everything validates (including the css) when I put in the doctype, but when the doctype is in it looks like a mess in all browsers. I've been using transitional xhtml. When I take it out it looks better in all browsers, but is still really bad in all but IE. I have put together on my site two pages with the same code except one has the doctype and the other doesn't. The css for both is: Code: body {
background: #EFF7FF url(bg.gif);
text-align:center;
padding:0;
}
#outer {
border:5px double #234B77;
width:650px;
padding:0px;
margin:0px;
}
#hdr {
width:650px;
height:151px;
background: #21558C;
}
#bar {
width: 650px;
height:90px;
background: #ADD7EF url(rainbowsitedesign_2x1.gif);
border:solid #000000;
border-width:0px;
padding-top: 37px;
text-align:left;
}
#bodyblock {
position:relative;
background: #ADD7EF url(backgroundforsite.gif);
width:650px;
padding:0;
}
#l-col {
float:left;
background: #ffffff url(white.gif);
color: #333333;
width:140px;
border-left: 1px solid #234B77;
border-right: 1px solid #234B77;
border-top: 1px solid #234B77;
border-bottom: 1px solid #234B77;
margin-top:10px;
margin-bottom:10px;
margin-left:5px;
margin-right:5px;
}
#coltop {
height: 42px;
background: #3971B5 url(tabletop.gif);
color: #000;
text-align: center;
padding:10px;
font-size: 105%;
font-weight: bold;
color:#1A3958;
}
#cont {
width:485px;
background: #ffffff url(white.gif);
border-left:1px solid #234B77;
border-right:1px solid #234B77;
border-top:1px solid #234B77;
border-bottom:1px solid #234B77;
text-align:left;
margin-top:10px;
margin-bottom:10px;
margin-right:5px;
font-size: 100%;
font-weight: normal;
color:#1A3958;
}
#contentop {
width:485px;
height:42px;
background: #3971B5 url(tabletop.gif);
color: #333333;
border-left:0px solid #234B77;
border-right:0px solid #234B77;
border-top:0px solid #234B77;
border-bottom:1px solid #234B77;
margin:0px;
text-align: center;
padding:10px;
font-size: 105%;
font-weight: bold;
color:#1A3958;
}
#ftr {
width:650px;
height:25px;
background:#346EB4;
color: #333333;
border: 0px solid #000000;
margin:0;
}
#ftr2 {
width:650px;
height:25px;
background:#346EB4;
border: 0px solid #000000;
margin:0;
}
#ftr3 {
width:650px;
height:99px;
background: #346EB4 url(websitedesign.gif);
border: 0px solid #000000;
margin:0;
padding-top: 20px;
}
#home {
width:50px;
height:10px;
border: 1px solid #000000;
margin:0;
}
p:first-letter {
font-size: 120%;
font-weight: bold;
}
a.red:link { text-decoration: none; color: #234B77; }
a.red:visited { text-decoration: none; color:#ff0000; }
a.red:hover { text-decoration: underline; color:#ff0000; }
a.orange:link { text-decoration: none; color: #234B77; }
a.orange:visited { text-decoration: none; color: #ff6600; }
a.orange:hover { text-decoration: underline; color:#ff6600; }
a.yellow:link { text-decoration: none; color: #234B77; }
a.yellow:visited { text-decoration: none; color: #ffff00; }
a.yellow:hover { text-decoration: underline; color:#ffff00; }
a.green:link { text-decoration: none; color: #234B77; }
a.green:visited { text-decoration: none; color: #009900; }
a.green:hover { text-decoration: underline; color:#009900; }
a.blue:link { text-decoration: none; color: #234B77; }
a.blue:visited { text-decoration: none; color: #0000ff; }
a.blue:hover { text-decoration: underline; color:#0000ff; }
a.violet:link { text-decoration: none; color: #234B77; }
a.violet:visited { text-decoration: none; color: #660066; }
a.violet:hover { text-decoration: underline; color:#660066; }
#ftr2 a:link { text-decoration: underline; color: #152F4D; }
#ftr2 a:visited { text-decoration: line-through; color: #ccc; }
#ftr2 a:hover { text-decoration: none; color: #88B2DC; }
Here are the two pages: With doctype: http://rainbowsitedesign.com/withdoctype.html Without it: http://rainbowsitedesign.com/nodoctype.html How can I fix both my browser problems and my doctype problems? Any help is app! Here is the relevant HTML code: <table> <tr> <td> <div style="float:left;"> <div class="middle"><div class="r"><div class="l"> <a id="gridtitle" href="javascript:void(0)" onclick="reload()"></a> </div></div></div> <div style="width: 200px;"> <a href="#" onclick="addheader()"><img border="0" src="tab_new_header.png" alt="Delete this grid"/></a> <a href="#" onclick="addfooter()"><img border="0" srctab_new_footer.png" alt="Delete this grid"/></a> </div> </div> <div style="float:right;"> <a href="#" onclick="javascript:toggleLayer('newgrid');"><img border="0" src="button_add.png" alt="Add a grid"/></a> <a href="#" onclick="deleteGrid()"><img border="0" src="button_delete.png" alt="Delete this grid"/></a> </div> </td> </tr> <tr> <td> <div id="gridbox3" class="gridbox" width="870px" height="600px" style="background-color:white;"></div> </td> </tr> </table> And the relevant CSS code [which just sets the background of the tab]: .l {background: url(../../datadir/client/images/billinggrid/name_sidebg1.png) 0 0 no-repeat; height: 43px;} .r {background: url(../../datadir/client/images/billinggrid/name_sidebg2.png) 100% 0 no-repeat; height: 43px;} .middle {background: url(../../datadir/client/images/billinggrid/name_sidebg.png); height: 43px;} This is the output (i can't post images?) http://i34 [.] tinypic [.] com/4hpqag [.] png The first problem I am having is that the div my gridtitle (CIBC) is in does not set its width automatically to the text width. Instaed, it spans the whole table ... Position-wise, I would like the tab with "CIBC" to be to the far left, the header and footer tabs to be right of "CIBC" but still floating left, and the + and x signs to be floating right, all on the same line. Help? Thanks in advance. I am trying to build a table in which the center scrolls both ways but the columns and rows around the edges stay put - have a look at the page below using IE6 to see what I mean: (URL address blocked: See forum rules) This is working exactly as I want it to in IE6, my problem is that I can't get it to work right in IE7 - the horizontal scrolling is not working properly. By re-instating the commented out code on line 81 I can get it to sort of work, but I don't want to have to specify the width like this as the table contents are going to be dynamic and there is no way of knowing how wide they will be. This is for use on a company intranet where all the users have IE6 or IE7, hence I am not concerned with other browsers or earlier versions of IE. Any help getting this working would be much appreciated... P I was wondering does anyone know where I can obtain the Internet Explorer 6 stylesheet for Windows XP? The UI components in IE6 look different in Windows XP than IE6 for Windows 2000. I would like to obtain the stylesheet if it is available somewhere. Thanks for your help. Val I have three different css Stylesheets. Now I want to give access to my users to change their required styles using dropdownlist. And next time when the user is login in the same last selected style sheet should be displayed to him. How can i do this please help me its urgent ? Hi Could someone assist me in making a print stylesheet for this site please! http://calibrehr.com/new/ What I need is: just the logo to display (remove nav) The text in the orange block to span the width of the page Remove subnav Some how diplsay the text that is in the purple boxes below the main content text I am stuck as to what to do and could really appreciate some help Many thanks! I'm fairly new at web development and pretty much a newbie at using CSS. I noticed on foxnews.com that they use a parameter with the CSS file. I've did searches on this but not turned up alot. Code: <LINK REL=STYLESHEET TYPE="text/css" HREF="/css/mainStyles2004.css?v2"> <LINK REL=STYLESHEET TYPE="text/css" HREF="/css/rootStyles.css?v3"> I'm assuming the ?v2 and ?v3 are PHP like paramters. I looked at the CSS file using the firefox web developer toolbar and I didn't see any referance to v2 or v3 in those files? Can anyone explain this to me? Hi people, I am completely new to programming and have only spent this weekend learning it! I have managed to create a decent website already, however i am stuck at a point. On my main page, i have attached a CSS stylesheet with all the formatting for my page. My problem however is that when i try to format one section (<div id="gallery">) the formatting messes with the rest of the page. Is there a way that i can assign a style sheet to only that <div id="gallery"> without it applying to the entire html page. Any help is greatly appreciated! Thanks Chris Hey all, a few probs here. My new webpage coded with stylesheets: http://www.stocksbridgepentaqua.co.uk/test/index.php It looks good in IE and bad in FireFox (mozilla) its not a major problem because the ppl im targetting are using IE. Next, on this page: http://www.stocksbridgepentaqua.co..../index.php?id=9 I want a scroll bar in the actual window instead of it making the box massive. And another thing, how do I make a space between the bottom of the website and the bottom of the browser? Thanks. Jack. Hiya, theres a website I'm creating a print stylesheet for which includes the company logo in the header, with a footer of contact details. problem is, the website is all static pages and 100 odd pages, so as I'm having to deal with the static state of the site for now, is there a way I can have in the Print stylesheet or in the CSS where the logo can be inserted in a header and a footer created with text? hope this makes sense? Can you only exclude elements from a Print stylesheet? I'd like to print only a table of data and nothing else on the web page in a print style sheet. On the one hand Accessibility guidelines state that sites should work even if stylesheets fail to load... ... and then on another hand, you're told not to include any style/layout/formatting within an html page - to use the stylesheet instead. My question is this. Say i create a site which is arranged in the common layout of header at top, nav menu floated to the left, main content sitting on the right, and then footer below. Should the layout of the div's, namely the float left etc be within the webpage or the stylesheet. I guess most people will say stylesheet, but that means if the stylesheet fails to load, the site layout will be completely messed up with the content appearing below the nav menu. Do you make an exception in this case and include some limited layout-style information in the webpage? What are people's opinions on this? Hello All, I was hoping that you could look at a site for me, and help me figure out what is causing the rendering issues in IE6/7. I have a separate CSS stylesheet for anything that is IE7 or lower; however, I am not sure if it is actually loading at all. I don't really have access to IE6/7 in a live environment, to check everything about the site, so if anyone has any suggestions for tools that will allow me to work with a live view of IE6/7 that would be a great help as well. The site link is: http://www.saracanada.com/ Thanks in advance everyone. ok the stylesheet contains this: BODY, TD, TR, P, UL, OL, LI, INPUT, SELECT, DL, DD, DT, FONT { font-family: Verdana, Arial, Clean, Helvetica, sans-serif; font-size: 12px; } and I need to add this into it BODY { scrollbar-face-color: #DEE3E7; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #DEE3E7; scrollbar-3dlight-color: #D1D7DC; scrollbar-arrow-color: #006699; scrollbar-track-color: #EFEFEF; scrollbar-darkshadow-color: #98AAB1; } Ok here's what I don't understand. The original stylesheet(used by a php script) contains lots of things at the top separated by commas. Does that mean that it will affect all of those things? So I have to do this? BODY { font-family: Verdana, Arial, Clean, Helvetica, sans-serif; font-size: 12px; scrollbar-face-color: #DEE3E7; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #DEE3E7; scrollbar-3dlight-color: #D1D7DC; scrollbar-arrow-color: #006699; scrollbar-track-color: #EFEFEF; scrollbar-darkshadow-color: #98AAB1; } TD, TR, P, UL, OL, LI, INPUT, SELECT, DL, DD, DT, FONT { font-family: Verdana, Arial, Clean, Helvetica, sans-serif; font-size: 12px; } Sorry about the newbie question, but I gotta start some where. Hey, I've run into a problem where I though i knew how to do it an easy way but it only worked for about 5 minutes. Here is what I have. All of my pages have the same navigation from an external PHP file. The style is saved in the main.css stylesheet. When you select a link it gets a background image. I thought that I could save my self having to edit every page for IE by doing this in the main.css stylesheet Code:
* html>#navwhatever{
/*set to gif iamge instead of PNG image*/
background-image:url('image/splash_legion.gif');
}
This doesn't work. It still uses the PNG images. I'd realy like not to have to edit every page to fix my site for IE, any suggestions would be great. Thanks for reading I am using this css for my entire site, and it all shows up right under IE and Firefox. Konqueror is fine, just wont show the opacity filter. I tried to get it validated, and it doesn't like the opacity lines. First try at an external stylesheet, so could use the help. I can't find anything on correct syntax to use other than what I have already used. @charset "ISO-8859-1"; .fade {filter:alpha(opacity=70); -moz-opacity:0.7; background:#ffffff;} font, td, p {color:#0000FF; font-size:medium; font-family:Comic Sans MS,sans-serif;} a { font-size:medium; font-weight:bold; font-family:Comic Sans MS,sans-serif; text-decoration:none; color:#0000FF; } .link1 a { color:#0000FF; } |
|||||||