Hartley

Code in Question: http://andrewhartley.com/cb-test/ In all other browsers, the code displays fine. The area I'm looking at is the navigation bar with "Home, Scribe, Community". To minimize HTTP requests, I have one image that contains the map of header images, which is why it looks double buggy when it breaks. I don't know how to fix this, but it seems that the padding or initial position of the div container isn't the same as what it is in the other browsers. Here are the segments of code for these areas: <!--start header--> <div id="header"> <!--logo--> <h1 class="logo"><a href="#" class="logo">CastBuzz</a></h1> <!--top panel--> <div class="member"> <div class="member-right"></div> <ul class="member-info"> <li><p>Hello, Andy</p></li> <li><a href="profile.php?p=edit">Edit Site Profile</a></li> <li><a href="#">Log Out</a></li> </ul> <div class="member-left"></div> <!--top tabs--> <div class="tab">1</div> <div class="tab">2</div> </div> <!--top navigation--> <div class="topnav"> <ul id="nav-menu"> <li><a href="#" class="nav-home">Home</a></li> <li><a href="#" class="nav-scribe">Scribe</a></li> <li><a href="#" class="nav-community">Community</a></li> </ul> </div> </div> <!--end header--> /* id components */ #header { height:101px; width:970px; margin:0 auto; background:url("../images/site/main/banner-sheet.jpg") no-repeat; } /* logo */ h1.logo { height:100px; width:300px; margin:0 0 0 15px; display:inline; float:left; position:relative; text-indent:-9999px; } .logo a { height:100px; width:300px; display:block; } /* header content */ .member { height:30px; padding:0 15px 0 10px; float:right; } .member-left { height:30px; width:5px; background:url("../images/site/header-tabs/left-50.png") no-repeat; float:right; } .member-right { height:30px; width:5px; background:url("../images/site/header-tabs/right-50.png") no-repeat; float:right; } .member-info { height:30px; background:url("../images/site/header-tabs/middle-50.png") repeat-x; float:right; } .member-info li { padding:7px 10px 0 10px; background:url("../images/site/header-tabs/separator.jpg") no-repeat 0 10px; float:left; } .member-info li:first-child { background:none; } .member-info li p { color:#fff; font:11px Verdana; } .member-info li a { color:#fff; font:11px Verdana; float:left; text-decoration:none; } .member-info li a:hover { text-decoration:underline; } .tab { height:30px; width:40px; margin:0 20px 0 0; background:url("../images/site/header-tabs/tab.png") no-repeat; float:right; } /* menu */ .topnav { height:54px; margin:17px 0 0 186px; float:left; position:relative; } #nav-menu { width:447px; list-style:none; } #nav-menu li { margin:0 0 0 14px; float:left; position:relative; } #nav-menu li:hover ul, #nav-menu li.hover ul { display:block; } #nav-menu li a { float:left; height:54px; text-indent:-9999px; } #nav-menu li a.nav-home { background:url("../images/site/main/banner-sheet.jpg") no-repeat -515px -101px; width:114px; } #nav-menu li a.nav-home:hover { background:url("../images/site/main/banner-sheet.jpg") no-repeat -515px -155px; } #nav-menu li a.nav-scribe { background:url("../images/site/main/banner-sheet.jpg") no-repeat -643px -101px; width:124px; } #nav-menu li a.nav-scribe:hover { background:url("../images/site/main/banner-sheet.jpg") no-repeat -643px -155px; } #nav-menu li a.nav-community { background:url("../images/site/main/banner-sheet.jpg") no-repeat -781px -101px; width:167px; } #nav-menu li a.nav-community:hover { background:url("../images/site/main/banner-sheet.jpg") no-repeat -781px -155px; } Thanks in advance for any assistance!

Thank you for the help. I found a JS that can cling it to the bottom, but I don't like the use of a script to solve the problem. I'm going to rework it so that the bottom bar isn't required, and if it's 6.0, to simply block that section of code from displaying. Thank you all very much for the help!

All right, thank you. I noticed one more bug in IE7. The page is supposed to stretch and keep a 20px edge on either end. When the page is set to the width of the "normal" layout, it looks fine. However, as you increase the width of the page, it proportionately increases the width of the bar at the bottom and stretches it beyond the edge of the page. Anyone know why it would do this? Same link above and source code. Thanks in advance!

Hello everyone! I'm having an issue with a menu I'm implementing. I'll first link to the current test page that is up. c*ast*buz*z.com/beta/test-a/ (remove the stars) The menu in quesion is the gray one with a subtle outer shadow. If you display it in Firefox, IE7+, Opera: it displays properly. The menu is meant to hover above all other text at the bottom (resize the page and it works properly). !!IE6 creates two noticeable bugs!! 1. Bar doesn't cling to the bottom of the browser. 2. The two caps don't attach to the bar properly. I attached an image of the IE6 bug in here in case anyone doesn't use the browser anymore. I'm also including the relevant sections of source code below. For the HTML, I haven't put in any list items yet. Those work fine in testing, but they aren't central to this bug and have been removed. Thus the empty "userbar" element. HTML <!--start userbar--> <div id="userbar-wrap"> <div id="userbar"> </div> </div> <div id="userbar-cap-wrap"> <div id="userbar-bg-left"></div> <div id="userbar-bg-right"></div> </div> <!--end userbar--> CSS /* user bar */ #userbar-wrap { width:100%; bottom:0; position:fixed; z-index:99999; } #userbar { height:40px; margin:0 30px; background:url(../images/site/userbar/u-base.png) repeat-x; position:relative; text-align:left; } #userbar-cap-wrap { width:100%; bottom:0; position:fixed; z-index:99999; } #userbar-bg-left { height:40px; width:10px; margin:0 20px; background:url(../images/site/userbar/u-left.png) no-repeat; float:left; } #userbar-bg-right { height:40px; width:10px; margin:0 20px; background:url(../images/site/userbar/u-right.png) no-repeat; float:right; } Thanks in advance for any assistance! [attachment deleted by admin]

Problem fixed: solution was simply adding a "font-size:1px;" to each DIV container.

Attached is an image showing the bug in IE6. http://*cast*buzz.com/bs-test/ (Remove the stars) When I put a spacer.gif into those areas, it fixes the problem, but I want to see if this can be fixed the right way through CSS. HTML in Question <!-- users online --> <div class="s-top-first"></div> <div class="s-mid"> <ul class="s-bar"> <li id="s-online"><a href="#">Online</a></li> </ul> </div> <div class="s-bot"></div> <!-- member side panel --> <div class="s-top"></div> <div class="s-mid"> <ul class="s-bar"> <li id="s-email"><a href="#">Mail</a></li> <li><ul id="s-mail-sub"> <li><a href="#">Compose Mail</a></li> <li><a href="#">View Inbox</a></li> <li><a href="#">Track Messages</a></li> <li><a href="#">Edit Folders</a></li> </ul></li> <li id="s-profile"><a href="#">Profile</a></li> <li><ul id="s-profile-sub"> <li><a href="#">View Profile</a></li> <li><a href="#">Edit Profile</a></li> <li><a href="#">Edit Photos</a></li> <li><a href="#">Profile Privacy</a></li> </ul></li> <li id="s-settings"><a href="#">Settings</a></li> <li><ul id="s-settings-sub"> <li><a href="#">Edit Avatar</a></li> <li><a href="#">Edit Signature</a></li> <li><a href="#">Edit Options</a></li> </ul></li> <li id="s-blog"><a href="#">Blog</a></li> <li id="s-stats"><a href="#">My Statistics</a></li> </ul> </div> <div class="s-bot"></div> </div> Relevant CSS /* sidebar */ .s-top-first { height:5px; width:180px; background:url("../images/site/main/side-top.png") no-repeat; display:block; } .s-top { height:5px; width:180px; margin:10px 0 0 0; background:url("../images/site/main/side-top.png") no-repeat; display:block; } .s-mid { width:160px; padding:0 10px; background:url("../images/site/main/side.png") repeat-y; } .s-bot { height:5px; width:180px; background:url("../images/site/main/side-bottom.png") no-repeat; display:block; } /* side menu */ .s-mid a { color:#fff; font:11px Verdana; text-decoration:none; text-transform:uppercase; } .s-mid a:hover { text-decoration:underline; } .s-bar li { width:160px; padding:0 0 5px 0; list-style:none; text-indent:22px; } /* menu itemization */ #s-online { background:url(../images/icons/status_online.png) no-repeat; padding:0; } #s-email {background:url(../images/icons/email.png) no-repeat; } #s-profile { background:url(../images/icons/vcard.png) no-repeat; } #s-settings { background:url(../images/icons/cog.png) no-repeat; } #s-blog { background:url(../images/icons/book.png) no-repeat; } #s-stats { background:url(../images/icons/chart_bar.png) no-repeat; padding:0; } /* remove uppercase */ #s-mail-sub a { text-transform:none; } #s-profile-sub a { text-transform:none; } #s-settings-sub a { text-transform:none; } Thank you in advance [attachment deleted by admin]

Hey, On my Mac, I'm using Dreamweaver for coding. However, when I look at the source code on a Windows machine, line breaks don't parse properly. Is there a way to fix this with the program so that it doesn't look so clunky in Windows? Thanks in advance!

I see, IE was throwing off that list item. I tried those and it worked beautifully. I also found a CSS Reset set of items which, when I put it in, unified the pages across all browsers, even with those nitpick 1px differences. Thank you everyone for the help!

You don't necessarily need the "-image" option on there. The browsers will interpret "background:" just the same. Small code change, but could fix the bug.

Hey, I'm running into an issue with IE. The attached image shows IE on the left and what every other browser (FF here) looks like on the right. I can't seem to get the code to line up. Below is the relevant HTML markup: <div class="s-mid"> <ul class="s-bar"> <li id="s-email"><a href="#">Mail</a></li> <ul id="s-profile-sub"> <li><a href="#">Compose Mail</a></li> <li><a href="#">View Inbox</a></li> <li><a href="#">Track Messages</a></li> <li><a href="#">Edit Folders</a></li> </ul> <li id="s-profile"><a href="#">Profile</a></li> <ul id="s-profile-sub"> <li><a href="#">View Profile</a></li> <li><a href="#">Edit Profile</a></li> <li><a href="#">Edit Photos</a></li> <li><a href="#">Edit Settings</a></li> <li><a href="#">Profile Privacy</a></li> </ul> <li id="s-blog"><a href="#">Blog</a></li> <li id="s-stats"><a href="#">My Statistics</a></li> </ul> </div> And the CSS: /* side menu */ .s-mid a { color:#fff; font:11px Verdana; text-decoration:none; text-transform:uppercase; } .s-mid a:hover { text-decoration:underline; } .s-bar { margin:0; padding:0; } .s-bar li { height:20px; width:160px; list-style:none; text-indent:22px; } /* menu itemization */ #s-online { background:url(../images/icons/status_online.png) no-repeat 0 1px; } #s-email {background:url(../images/icons/email.png) no-repeat 0 1px; } #s-profile { background:url(../images/icons/vcard.png) no-repeat 0 1px; } #s-blog { background:url(../images/icons/book.png) no-repeat 0 1px; } #s-stats { background:url(../images/icons/chart_bar.png) no-repeat 0 1px; } /* my mail */ #s-mail-sub { padding:0; position:relative; } #s-mail-sub a { text-transform:none; } #s-mail-sub a:hover { text-decoration:underline; } /* my profile */ #s-profile-sub { padding:0; position:relative; } #s-profile-sub a { text-transform:none; } #s-profile-sub a:hover { text-decoration:underline; } It's definitely some basic stuff I'm overlooking. Thanks in advance! [attachment deleted by admin]

I tried searching and couldn't figure out a good search algorithm to find this. I'm making a CMS and in one of the textareas, HTML is meant to be inputted by administrators. How do I set it so that the HTML is preserved and won't cause a mySQL error from any quotations at the same time? Thanks in advance!

I appreciate the advice: just installed it and I see what you mean. Unfortunately I'm pressed to release soon, but I'll still have time to fix a lot of this shortly after launch. My target audience is college age students, so based off of that I should be relatively safe while I take the time to fix it. Again, thanks for the program suggestion! =)

Posting the solution: The culprit code: #content .box-info { background:url(../images/box-top.jpg) no-repeat; width:936px; overflow:hidden; min-height:150px; [b]padding:17px;[/b] Coupled with the following bug: http://www.positioniseverything.net/explorer/peekaboo.html The displacement was 17px, and it fit the bill. When I removed this padding, the problem was solved. For my own CSS, I put the padding within the main and side column CSS code, and no more problem!

I've adjusted the values for the height, and no matter the height, it "pops" the footer by the same 20-some pixels each time. I could do an image-replace, but background-position is more efficient and this is a... weird issue! Thanks in advance!

Since it was short, I did a really quick do-over converting it to CSS. Bear in mind there's a lot to do, like adding the doctype and whatnot so it'll post fine, but the idea here it for you to see how this works for your purpose. It was FilmGod about a year ago who said the same exact thing to me, and since then tables are only used for data! Note I took out the PHP stuff in there, so you'll have to add it back in where you see fit. HTML <html> <head> <title>.::. Dirty Little Secrets .::.</title> <link rel="stylesheet" type="text/css" href="css.css"> </head> <body> <div id="container"> <div class="topbar"> <div id="menucontain"> <ul id="menu"> <li><a href="#">Home</a></li> <li><a href="#">Secrets</a></li> <li><a href="#">Dirt Digger</a></li> <li><a href="#">Archives</a></li> <li><a href="#">Staff</a></li> </ul> </div> </div> <div class="content"> Content </div> </div> </body> </html> CSS body { background-color: #333366; } #container { width:75%; overflow:hidden; margin:0 auto; } #container .topbar { background: #333366 url("http://exposemyschool.co.cc/site/images/top_bar.jpg") top left repeat-x; height:143px; width:100%; } /* content */ #menucontain { width:100%; margin:0 auto; padding:103px 0 0 0; overflow:hidden; } /* menu */ #menu { width:100%; margin:0; padding:0; list-style:none; } #menu li { float:left; position:relative; width:20%; } #menu li:hover ul, #menu li.hover ul { display:block; } #menu li a { background: #333366 url("http://exposemyschool.co.cc/site/images/nav_bar.jpg") top left repeat-x; float:left; height:40px; width:100%; text-align:center; } .content { float:left; position:relative; } Link for reference: http://www.alistapart.com/articles/taminglists/ - Learn about how to make UL work for you. Also see what you can dig up on web standards: you'll find your markup becomes MUCH cleaner and browser-friendly.