|
CSS - Finishing Touches (a Few Css Problems/misunderstandings)
Hey guys,
So I am finally finishing up my site! you can view it at www. paulfenton .tk/wordpress It would probably be best to answer these questions by using firebug or the chrome inspector because obviously my understanding of what code controls what part is poor . If anyone has any code requests I can post them here in the replies. Ok.. so here are the CSS problems I have to solve to finish my site. If anyone could shed any light on any of these problems I would be greatly appreciative. 1) I want to have the main content column (the 800 pixel wide column that is currently on the left) be in the center, with a div on the left and right each containing a y-repeating gradient to give the page some nice framing. My problem is, my mainContentPanel div id appears to stretch across the whole screen and has no height, even though it contains all of the content. I must not be understanding something about how css works here. Maybe I have misdiagnosed the problem, but at any rate I need to figure out how to centre my page with the left and right side gradients. 2)The panel that contains the content and is navigable by the scrollbars seems to have a yellow border when I select it.. I have looked through the css to see if there is a border on any div, but I cannot find it. I want to remove this yellow border completely. 3)I want to remove the horizontal scrollbar and the jogbox in the bottom right of the main content. I am using flexcroll, and as far as I know the best way to do this is to make the divs with ids (mycustomscroll_hscrollerbase, mycustomscroll_hscrollerbar, and mycustomscroll_scrollerjogbox) have the attribute (visibility:hidden. I have tried to specify this in my .css file, but in the inspector it appears crossed out and the computed styles for the divs become visible anyways. Not sure why... 4)before clicking on anything or selecting anything in the content column, I want the mouse scrollwheel to control the vertical scroller in the main content pane. Not sure if this is a CSS problem but hopefully someone will know. 5)my vertical scrollbar seems bunched up with the content... I want a nice way to add a 5px margin on the left hand side of the scrollbar. I thought of creating a spacer div, but that seems messy. If you guys have any other comments, tips, or suggestions, I would love to hear them! Thanks in advance, -Paul Similar TutorialsOk guys, so my website is www. paulfenton .tk/wordpress. I have put a lot of work into it but I have three final snags that need fixing (and I cant seem to figure them out). 1) Bottom Left Gradient doesnt seem to be aligned properly... I am using the background-position:top right; attribute, and I think this is in effect, however the div that holds the bottom left gradient is the width of the whole window rather than the 50% it is supposed to be.. and I cant figure out why.. 2) I want to get my favicon working: I have used the code Code: <link rel="icon" type="image/png" href="images/favicon.png"> inside my <head> and I have the image in the right place in the directory, but my I am still getting a white sheet with a bent over corner... 3) I want people to be able to access the website by just using www. paulfenton .tk (without having to type in the /wordpress). Simply dropping all of the directorys in the /wordpress folder into the paulfenton. tk folder causes a bunch of path failures.. so I would rather not go this route, I can use a meta tag, but if my server is slow the user will sit on my empty main page while they wait for /wordpress Does anyone know how I can set it up so that the forward works instantly? Any help for any or all of these problems would be greatly appreciated, Hope to hear from someone soon.. -Paul Only to be associated with Firefox for now..... As I come near the end of my page layout, there are just a few things that I need to fix. First off, in my navigation menu, when you roll over a link, the entire menu expands. I have the border set before and after hover to be 1px, so I don't understand why this is occuring. Also, there seems to be somewhat of a margin for my banner inside it's container...both the margin and padding of the container and banner are set to 0, so I don't know how this can be. The web page can be found at the following address: http://prosurfacing.com/beta/ Attached is the document source and the CSS for the page. (index=page, site=CSS) 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;
}
so, i transferred my website from my laptop (running apache, no problems) to my desktop running IIS, and now my style sheet is not getting displayed. I installed PHP5, and thats running fine. I renamed my index.php to index.htm to see if it didnt like the sheet in a .php file, but it doesnt work then either. http://137.36.248.210/uchiha/index.php is there something in the IIS config i need to set to understand .css files? i made the .css extension and pointed it to the .dll file that the .shtml points to (according to another website i found) TIA for help, if you need any more info, please let me know I'm having a problem with CSS in IE8. I'm designing a page in C# that I want to have tabs, and found a template that I made compatible with ASP.NET (albeit a bit messily). I need this to look good in Firefox 3, IE8, and Safari, and while it looks great in FF3 and Safari, IE8 is having some problems. Is there a quick hack to make it IE quality that anyone can figure out? I've been trying for awhile but I'm stumped... The HTML/ASP.NET is: <div id="tabbar"> <ul> <asp:Panel ID="Panel1" runat="server" CssClass="tabitemLSel"><a><asp:LinkButton ID="LinkButton1" OnClick="ChangeView" CssClass="tabitemRSel" runat="server" Text="Live Questions" /></a></asp:Panel> <asp:Panel ID="Panel2" runat="server" CssClass="tabitemL"><a><asp:LinkButton ID="LinkButton2" OnClick="ChangeView" CssClass="tabitemR" runat="server" Text="Ask a Question" /></a></asp:Panel> <asp:Panel ID="Panel3" runat="server" CssClass="tabitemL"><a><asp:LinkButton ID="LinkButton3" OnClick="ChangeView" CssClass="tabitemR" runat="server" Text="Answered Questions" /></a></asp:Panel> </ul> </div> and the CSS is: #tabbar { float:left; width:100%; /*background:#DAE0D2 url("bg.gif") repeat-x bottom;*/ background: url("bg2.gif") repeat-x bottom; font-size:14px; line-height:normal; } #tabbar ul { padding:10px 10px 0; list-style:none; } #tabbar a:hover { color:#333; } .tabitemL { float:left; background:url("left.gif") no-repeat left top; margin:0px 0px 0px 0px; padding:0px 0px 0px 9px; } .tabitemR { float:left; display:block; background:url("right.gif") no-repeat right top; padding:5px 15px 4px 6px; text-decoration:none; font-weight:bold; color:#765; } .tabitemLSel { float:left; background:url("left_on.gif") no-repeat left top; margin:0px 0px 0px 0px; padding:0px 0px 0px 9px; border-bottom: solid 1px white; } .tabitemRSel { float:left; display:block; background:url("right_on.gif") no-repeat right top; padding:5px 15px 4px 6px; text-decoration:none; font-weight:bold; color: #333; } 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! I am attempting to make a joomla theme and I am having some problems with my css working in ie, yet it works in the other major browsers. the problems I am having is the h3 background image isn't displaying and a gap at the bottom of the page. http://settoloki.homeip.net:40080/badt/ view the site here and my css Code:
@charset "utf-8";
/* CSS Document */
body, html{
background:url(../images/back-grad.png) repeat-x #295171;
margin:0px;
padding:0px;
}
/*****************************************/
/*** Layout elements ***/
/*****************************************/
#content-wrap{
background:url(../images/background.png) no-repeat top left #99CCCC;
width:960px;
border-left:1px solid white;
border-right:1px solid white;
text-align:left;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
}
#content-head{
width:100%;
height:230px;
background:url(../images/header.png) no-repeat top left;
padding-top:20px;
}
#main-content{
width:900px;
border-collapse:collapse;
}
#main-content-top{
width:900px;
height:13px;
background:url(../images/main-content-top.png) no-repeat;
}
#main-content-mid{
position:relative;
background:url(../images/main-content-mid.png) repeat-y;
width:100%;
height:100%;
text-align:left;
}
#content-breadcrumbs{
border-bottom:1px solid #FFFFFF;
width:850px;
margin-bottom:40px;
margin-left:10px;
height:15px;
line-height:10px;
color:#FFF;
font-size:10px;
}
#content-left-side{
width:180px;
height:100%;
float:left;
padding-left:20px;
}
#content-main{
width:640px;
height:100%;
float:left;
}
#content-right-side{
width:200px;
float:right;
padding-right:20px;
}
#main-content-bottom{
background:url(../images/main-content-bottom.png) no-repeat;
width:900px;
height:21px;
}
#main-content-footer{
background:url(../images/footer.png) no-repeat;
width:100%;
height:201px;
}
/*****************************************/
/*** Page elements ***/
/*****************************************/
/*****************************************/
/*** Joomla! specific content elements ***/
/*****************************************/
div.offline {
background: #fffebb;
width: 100%;
position: absolute;
top: 0;
left: 0;
font-size: 1.2em;
padding: 5px;
}
/* headers */
div.componentheading {
margin:0;
color: #000;
background:url(../images/content-header.png) no-repeat;
height:37px;
width:640px;
line-height:37px;
font-weight:bold;
padding-left:15px;
margin-left:-4px;
}
table.blog {
background:url(../images/content.png) repeat-y;
margin-left:-4px;
}
h1 {
padding: 0;
font-family: Tahoma, Arial, sans-serif;
font-size: 1.3em;
line-height:19px;
font-weight: 700;
vertical-align: bottom;
color: #000;
text-align: left;
width: 100%;
}
h2, .contentheading {
padding: 0;
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 11px;
vertical-align: middle;
color: #295171;
text-align: left;
font-weight: 700;
}
h2, a.contentheading {
background: none;
border: none;
margin:6px 0;
}
h4 {
font-family: Tahoma, Arial, sans-serif;
color: #333;
}
h3{
width:180px;
height:37px;
line-height:39px;
color:white;
font-weight:bold;
background:url(../images/h3.png)no-repeat;
font-size:12px;
padding-left:15px;
padding-bottom:0px;
margin-bottom:0px;
}
div.moduletable_menu ul{
list-style:none;
padding:0px;
margin:0px;
}
div.moduletable_menu ul li{
background:url(../images/menu-link.png) no-repeat;
height:30px;
width:180px;
line-height:28px;
padding-left:22px;
}
div.moduletable_menu ul li a{
color:#FFF;
text-decoration:none;
font-size:10px;
font-weight:bold;
}
thanks in advance for any help. 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 I'm trying to build a menu with CSS and have some problems I can't figure out. Here's what I got so far: testsite So I need some kind of workaround for InternetExplorer cause it doesn't display the fonts correctly, what do I need to change to get that right? And is there a way to automatically adjust the width of the submenu fields according to the length of the text that's written within? Here's the stylesheet: Code:
menutext { font-family:sans-serif; font-size:25px; }
subtext { font-family:sans-serif; font-size:10px; color:#707070;}
subtext2 { font-family:sans-serif; font-size:12px; color:#707070;}
subtext2:hover { color:white;}
ul{
list-style-type:none;
padding:0px;
position:relative;
}
a{
float:left;
width:137px;
text-decoration:none;
color:#27251c;
font-weight:bold;
background:#e0e0e0;
padding:5px;
border-right:1px solid #FFFFFF;
}
li { display: inline;}
a:hover { background:#27251c; color:white; }
#navi {
width:888px;
position:absolute;
margin-left:-444px;
margin-top:-13px;
left:50%;
}
#navi #aktuell a{ background:#27251c; color:white; }
And here's the html: Code: <html> <head> <title>the artist crew</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <center> <img src="images/banner.png"> </center> <div id="navi"> <ul> <li><a href="index.html"> <menutext>home</menutext> </br> <subtext>news & announcements</subtext> </a></li> <li><a href="projects.html"> <menutext>habitat</menutext> </br> <subtext>who we are, what we do</subtext> </a></li> <li id="aktuell"><a href="flow.html"> <menutext>flow</menutext> </br> <subtext>exhibitions & other works</subtext> </a></li> <li><a href="nexus.html"> <menutext>nexus</menutext> </br> <subtext>downloads & free stuff</subtext> </a></li> <li><a href="swarm.html"> <menutext>swarm</menutext> </br> <subtext>friends & affiliates</subtext> </a></li> <li><a href="hive.html"> <menutext>hive</menutext> </br> <subtext>where to get our stuff</subtext> </a></li> </ul> <ul style="top:2px;"> <li><a href="projects.html" style="width:48px;"> <subtext2>projects</subtext2> </a></li> <li><a href="conceptart.html" style="width:67px;"> <subtext2>concept art</subtext2> </a></li> <li id="aktuell"><a href="urbanart.html" style="width:53px;"> <subtext2>urban art</subtext2> </a></li> <li><a href="paintdraw.html" style="width:120px;"> <subtext2>paintings & drawings</subtext2> </a></li> <li><a href="sketches.html" style="width:53px;"> <subtext2>sketches</subtext2> </a></li> </ul> </div> </body> </html> Thanks in advance! I am working on a website that was not planned out by me, but requires that a DHTML menu drop down over a Flash object. I have very little experience with this situation. I have been able to make the menus work almost perfectly within a PC environment (Internet Explorer, Netscape, Firefox). I don't have a MAC, but after viewing the page on a friend's MAC noticed that the menu does not show up in Internet Explorer, and drops down below the flash in Safari and Mozilla. I would really appreciate someone taking a look at this for me. The test web address is: http://www.cityofpetal.com/jax/index.htm Any help or tips would be very much appreciated. Thanks. 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 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 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;
}
}
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 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>
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; } I am having some cross browser problems here. It displays perfectly in Opera, there is a 4 px spacer in Firefox, and there is a bold purple line in IE. Could anyone point me point on what I am doing wrong. Code: CSS
.left { float: left; }
.right { float: right; }
BODY { background: #b7bce2; }
html {
margin: 0px;
padding: 0px;
}
IMG { border: 0px; }
.tn-right { float: right; margin: 0px; padding: 0px; }
.caption { width:100%; background: url(images_v2/misc/caption_bg.png) repeat-x; font: 13px/21px 'Verdana', 'Lucida Grande', LucidaGrande, Lucida, Helvetica, Arial, sans-serif; text-align: center; height: 23px; }
.caption-l { float: left; width: 18px; background: url(images_v2/misc/caption_left.png) #fedb08; height: 23px; }
.caption-r { float: right; width: 18px; background: url(images_v2/misc/caption_right.png) #fedb08; height: 23px; }
#topnav { width:100%; background: url(images_v2/misc/topnav_bg.png) #6f7ad2 repeat-x; height: 32px; }
#topnav-left { width: 18px; height: 32px; background: url(images_v2/misc/topnav_left.png) #6f7ad2; float: left; }
#topnav-right { width: 5px; height: 32px; background: url(images_v2/misc/topnav_right.png) #6f7ad2; float: right; }
#header { width: 100%; background: url(images_v2/misc/header_bg.png) #FFFFFF repeat-x; height: 62px; }
#header-logo { width: 206px; height: 62px; background: url(images_v2/misc/header_logo.png) #FFFFFF; float: left; }
#header-end { width: 9px; height: 62px; background: url(images_v2/misc/header_end.png) #FFFFFF; float: right; }
#header-space { margin-top: -4px; }
Code: HTML Document
<html>
<head>
<title>testpage</title>
<link rel="stylesheet" type="text/css" href="css.css" id="css" />
</head>
<body>
<table border="0" width="100%" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<table cellpadding="0" cellspacing="0" align="$stylevar[left]" width="100%" border="0">
<tr>
<td>
<div class="caption">
<div class="caption-l"></div>
<div class="caption-r"></div>
</div>
<div id="topnav">
<div id="topnav-left"></div>
<div id="topnav-right"></div>
<div class="right">
<a href="#"><img src="images_v2/misc/topnav_home.png" width="83" height="32" alt="Home" /></a>
<a href="#"><img src="images_v2/misc/topnav_forums.png" width="85" height="32" alt="Forums" /></a>
<a href="#"><img src="images_v2/misc/topnav_about.png" width="88" height="32" alt="About DigitalSupremacy" /></a>
<a href="#"><img src="images_v2/misc/topnav_downloads.png" width="95" height="32" alt="Downloads" /></a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div id="header">
<div id="header-logo"></div>
<div id="header-end"></div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Picture of it in Firefox: http://img252.imageshack.us/img252/3244/inff8eg.jpg Picture of it in IE: http://img252.imageshack.us/img252/7064/inie5cy.jpg And it displays correctly in Opera. Thanks I'm making a school website; unfortunately, I'm having to work on an iMac with IE5. (I'm used to Mozilla for my own sites.) My problem is that part of my page (a list of names and positions, formatted as a definition list) isn't showing up. The scroll bar seems to be allowing room for all the content on the page, but everything below about one and a half screen widths is invisible - no background colour, no text. Thanks for any help. rsm2296 |
|||||||