|
CSS - Mysterious Ie Gap, Help Needed!
Similar TutorialsPlease poke around this site - http://swansonre.tmhdesign.com/home-payment-calculator.asp See the main content area (in white). It should butt up to the green navigation area but instead I get a gap for some reason or another. I've dissected this page up and down, left and right, but can't find what is causing the issue. If you browse some other pages you will see they are just fine. Thanks so much. T Um... OK so I wrote a post asking if anybody knew why something was displaying incorrectly on my site, but due to forum rules I wasn't allowed to include any links. So how can I show you the problem if I can't show you? Also, the link saying "see forum rules for more information" didn't have any more information. Like, how many posts until I can ask for help and actually show what the problem is? I have a region with a div, an image and another div stacked vertically. For some reason, there are a few pixels of blank space between the image and the bottom div. http://www.brucethorn.com/index.php...maritime-sunday On another page, I have regions with a "line-height + vertical-align:middle" centering of an image that make up thumb nails. There too is a few pixels of blank space, but at the top and images, pushing them down and slightly outside of the div that contains each of them. http://www.brucethorn.com/index.php/paintings I suspect these are the same problem, but I could be wrong. The issue is most visable in FF, and noticable in Opera. I only see something sporadic for the second occurence in IE Code: body {background-color:#999999; margin:0px; padding:0px; border:0px; text-align:center; font-family:"Courier New", Courier, mono;}
h1.header {height:16px; width:800px; _width:776px; font-size:100%; font-weight:bold; margin:0px 0px 0px 24px; text-align:left; background-color:#333333;}
h2.header {margin:0px; font-size:90%; font-weight:bold;}
div {text-align:left;}
h2.infoleft {text-align:left; height:16px; width:576px; font-size:90%; margin:0px 0px 0px 24px; _margin:0px 0px 0px 12px;float:left;}
h2.inforight {text-align:right; height:16px; width:176px; font-size:90%; margin:0px 24px 0px 0px; _margin:0px 0px 0px 0px;float:left;}
div.black {background-color:#000000; color:#999999;}
div.block {margin:8px 24px 8px 24px; text-align:justify; font-size:90%;}
div.block2 {margin:8px 0px 8px 12px; _margin:0px 0px 0px 4px;}
div.block3 {margin:8px 0px 0px 12px;}
img {border:0px; margin:0px; padding:0px;}
img.left {float:left;}
img.right {float:right;}
div.bar {height:16px; width:auto; text-align:center;}
div.title {height:48px; width:800px; margin:auto;}
div.content {height:392px; width:800px; margin:auto; text-align:center;}
div.subbar {height:16px; width:800px; background-color:#333333;}
div.menu {height:18px; width:480px; float:left; margin:30px 0px 0px 20px;}
div.copyright {height:16px; width:800px; margin:auto; text-align:right; font-weight:bold; font-size:75%;}
div.scroll {height:344px; width:800px; margin:8px 0px 0px 0px; overflow:auto;}
div.filmunit {height:128px; width:128px; border:4px; border-style:solid; border-color:#000000; background-color:#999999; margin:8px; padding:0px; float:left; text-align:center; line-height:128px;}
img.filmimage {vertical-align:middle;}
I just don't understand IE... something that should work just doesnt, and then it works fine on another page.... for example... Scroll Over The Staff Links at the very bottom You will notice that the black background disappears when viewed in IE... but take a look at the code isolated in IE and it looks perfect... So this is my first time every going this in-depth with creating a website from scratch simply using CSS. So far with the help of many tutorials it's been really great. However, shortly after adding my layout to my code a problem arose. For a while it was okay. I started creating different containers and parts of the page. But then after one save this bar magically appeared. After ctrl-z'ing as far as I could and refreshing I could not find the problem. Here is a picture of the bar above the page: http://tinypic.com/r/124zv47/7 Here's the code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<style type="text/css">
/*Currently not in use*/
.className {
position: absolute;
top: 0px;
left: 0px;
}
/*Surrounding background cover*/
#outside_container {
background: url(Slice.jpg);
background-repeat: repeat-x;
background-color: #000;
min-height: 900px;
}
/*Actual background*/
#container {
background: url(Complete_Layout.jpg);
background-repeat: no-repeat;
background-position: center;
min-height: 900px;
}
/*Future sidebar*/
ul#navigationmenu {
text-decoration: none;
}
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="outside_container">
<div id="container">
<ul id="navigationmenu">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Competitions</a></li>
<li><a href="#">Blog/Updates</a></li>
</ul>
</div>
</div>
</body>
</html>
Hi, folks. I'm having a curious problem with the navigation on my page. I'd like the nav and header to be all on the same line. It works when I just include the nav icons as images directly in the HTML. But when I make the nav icons into links, set each link to display:block, and give it the appropriate background-image, it puts all the icons on a new line. I'm not sure why. Any ideas? You can see the page with the problem and the effect I'm trying to achieve at these two TinyURLs: Problem: TinyURL dotcomslash a8qnky Working: TinyURL dotcomslash 8tj29l (The HTML validates, and the CSS validates except for the IE PNG transparency fix. I'm still experiencing this problem without that fix in place.) Hi folks, my website section "www(dot)mail(dot)tssma(dot)net" has an extra blue bar at the bottom of the page even though i specifically set it to 900 with the following css. I actually dont know why its blue either. Code:
body
{
background-image: url('http://www.tssma.net/templates/renrentemplate/images/Page-BgSimpleGradient.jpg');
top:0;
width: 100%;
height: 900px;
Not only that i cant seem to change the Username and Password input which is currently grey, to black using the css. Help will be greatly appreciated EDIT: Hahah yay, i somehow got rid of the bar on the bottom just need help with the grey input fonts. I've been looking through many, many forums trying to resolve this issue, so please forgive me if there is a solution to this that I've missed. Here's the deal: On some installs of Firefox (4.0), the body is being positioned 28px lower than the top of the screen. I set the <html> tag to have a light blue background to troubleshoot the issue, and now there is a light blue bar across the top of the page, proving that it is the body of the page that is lower than it should be. I thought it was a Firefox "collapsing margin" issue, so I added "margin:0; to almost everything, and it didn't help. I'm trying to do this without having to absolutely position everything. Here's the site: www-dot-myportlandtours-dot-com here's the css: www-dot-myportlandtours-dot-com/wp-content/themes/myportlandtours/style.css Anybody have insight into this? Hi All, I'm Ashley; a new member on this forum. I look forward to helping people out, as well as hopefully getting some of my own questions answered too! I've been designing a website, that I must (must) have up by saturday; I've done all the php back-end development for this site, and it's working great. I'm struggling however with the front-end design. I'd like to add here, not for sympathy for just to clear this up, that I have a visual impairment, so this is the part I struggle with most; Being totally blind, I have to rely on people with site to tell me exactly what's going on when web designing. Basically, I have an html template that looks like this: Code: <html> <head> <title>Test Page</title> </head> <body> <div id="wrap"> <div id="header"> <h1>This is the top header.</h1> </div> <div id="nav"> <ul> <li>This is main item one, with a list nested inside <ul> <li>This is sub item 1.</li> <li>This list should drop down when main item 1 is hovered over</li> </ul> </li> </ul> </div> <div id="content"> <h1>Content</h1> <p>All the main content for the page is placed here. </p> <p>Second Paragraph</p> <p>Third Paragraph</p> <p>Fourth Paragraph</p> </div> <div id="leftnav"> <p>This is the left section. It will hold the controls for changing the text size and sharing the page, as well as site statistics</p> </div> <div id="rightnav"> <p>This is the right navigation section. It contains the fields for a user to login if they aren't currently, and also contains some basic info</p> </div> <div id="footer"> <p>This is the footer.</p> <p>It should be posissioned on the bottom of the page</p> </div> </div> </body> </html> This is what I want to happen; the wrap div is the container for everything on the page, and fills the browser screen. The header div goes along the top of the page, and is the width of the entire screen. The nav div goes underneath the header, with the main nav items posissioned in a horizontal line. When, for example, "item1" is hovered over, a list drops down with sub items. The content div should fill a large area of the page underneath the navigation bar, and holds the page content. It should be the width of the entire screen. 'leftnav' and 'rightnav' should be Underneath the content area, posissioned to the left and the right respectively. They should each fill about half the width of the screen, and should not overlap. The footer should then be posissioned along the bottom and fill the entire width. I'm just not sure how to go about this; i've tried, but everything overlapped, pushed each other out the way, and generally didn't work. If somebody could give me an example that will achieve what i'm trying to achieve (I can add colours etc), It would really be very much appreciated. I've looked through the w3 CSS guides, and am slowly working through them, though am finding it slightly harder without the visual representation of how it works. Thanks for any and all help. Well... I have a stylesheet linked to all my pages and i want to add some text to the top of each page on the site, i have seen it done befour so don't say it is impossible and no it wasn't in php it was something like this: </style> blah blah blah that was at the end of the stylesheet so the texts is written in html not css, anyone know how to do it caus when i use the code i wrote there it dosn't work for some reason Hi Folks, Trying to get the following CSS code for page navigation to work on my site ((See example at bottom centre of this page add.ie/index.php?page=new&cid=6). You can see it working properly here on Yahoo. (h)ttp://uk.search.yahoo.com/search?p=news&ei=UTF-8&rd=r1&fr=yfp-t-501&pstart=1&b=11) #pg {clear:both;color:#3666d4;height:2em;margin:2em 0 2em 250px;} #pg a,#pg strong{border:1px solid #ccdbe4;display:block;color:#3666d4;float:left;margin:0 2px 0 0;padding:1px 8px;text-align:center;text-decoration:none;} #pg a:hover{background:#3666d4;border-color:#2b55af;color:#fff;} #pg strong{border:0;color:#000;font-size:107%;font-weight:bold;padding:2px 6px;} All is working fine, but for some reason when i click on a page number (See example at bottom centre of this page ((See example at bottom centre of this page (add.ie/index.php?page=new&cid=6), that page number jumps up like the picture i have attached. I can't seem to get the <strong> tag to force the text that is NOT a link to show like Yahoo within the other page numbers. Any ideas please? Thanks, S http://www.firstinsurancefunding.net Look at the top right button in both browsers. In FF2.0, this shows up WAY to the right. In IE6.x it's fine. I don't have IE7 on my computer to compare it. Can someone provide a fix, or tell me what info you need? I got a question. Can I anyhow create two equally tall div elements which like tables do, would lenghten together when I add content more than default 100% to another of these two elements, and using just pure CSS? I have a website that haves a div element named "body" which contains another div called "right", so the main element is separated in two parts. I've set the height of the both elements to 100% and they are positioned relative. Now, when I add content more than the default 100% to another div, the text will overflow the whole body element. And when manipulating the body div source code by replacing the property height:100%; to min-height:100%; the problem with the height is solved but the right aligned div gets shorter a quite. I have asked for help from another sources also, and some people gave good advices for me to consider using the faux columns method. Well, it would be one solution, as also if I replaced the body element by a table - but I sure want to be aware if there's a solution for this using just plain CSS. Thanks in advance. Here's also the source code: Quote: body,html { margin:0; padding:0; background:#C73F17; height:100%; } #body { margin:auto; height:100%; width:90%; border-left:solid #000 1px; border-right:solid #FFB00F 1px; background:#FFFFCC; } #header { height:70px; border-bottom:solid #000 2px; text-align:center; background:#1c1c1c; } #footer { height:25px; border-top:solid #1c1c1c 1px; background:#000; } #right { float:right; width:150px; height:100%; border-right:solid #FFF 1px; background:#1c1c1c; } #nav { height:20px; border-bottom:solid #000 2px; background:#282828; } Hi there, Please help me with the CSS on my website, http://www.tophatweddings.co.uk On the home page I am trying to display a product feed as rows of 3. However, you will notice that sometimes it will force a new line. I do not understand what is causing this The class being applied is he Code: #productDisplay li
{
float:left;
width:165px;
padding-right:10px;
padding-bottom:10px;
padding-top:10px;
}
Please help oh wise CSS gurus What should I try? Hello All, I have issues with the repeating background on IE only. In firefox,it works fine. Please find the attached ZIP file for all the content with its assets. I am trying to have a curved images on the TOP LEFT & TOP RIGHT only and a image background on the content. In Firefox, the content background is not repeating after the TOP RIGHT and fits correctly. But in IE, the content background is extended after the TOP RIGHT. Please advice. Thanks in advance. John Hello. I really need some help with this problem. If you are willing to help, check out the site with my problem: http://www.test.cos.ucf.edu/content/deans/staff.html (this link may expire within a few months of post date) I'm a student, but I'm getting paid to develop this site (not enough payment of course ). Hopefully you don't mind helping anyways. Looking at this page in Firefox shows no problems, yet in IE 7, it looks much worse. There is a problem which I am not aware of. Is it like anything you have heard of? Thank you for the help --------------------- FIXED --------------------- The problem was with a contained div with overflow set for vertical scrolling. However, there was a ul with li's floating within it within the div to make a grid. Each li had an image within it with position:relative. This relative positioning screwed up the scrolling for the div. So I added padding to each li element to make up for the top and left properties. If you want a better explanation please ask. Since I could not quickly figure out how to delete this post, I figured I would explain the solution. Thanks! Hi, I am putting together a design for a client and have a complex navigation menu made in CSS (the CSS menu was paid for from a third party). Now I have found out that it is not IE6 compliant because the maker of the menu falls into the 'nobody should use IE6 because it is too old and painful to code for, therefore I won't cater to it' camp. Apparently he doesn't mind cutting out 18% to 32% of visitors. So I am hoping someone here will recognise the behaviour and be able to suggest the fix. I feel sure it would be doable with one of those exception rules in the CSS, for IE6. Here is the site (work in progress still): http://southcarolinanightlife.com/ The CSS for the menu is he http://southcarolinanightlife.com/templates/tmpl_uni/css/menu/menu15.css Note how, with IE6, when you hover over navigation drop down menus, the submenus all appear at the extreme left, rather than beneath the menu item you are hovering over. In other browsers it seems to be just fine. Many thanks if anyone can assist. Kevin Hi everyone, I'm in trouble, I need to get this page ready by tomorrow and I'm stuck with the alingning of the section under the heading. It should look as three columns (two sidebars + center) and I just can't figure why it doesn't get alingned properly. the page is <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked: See forum rules)"> <html xmlns="(URL address blocked: See forum rules)"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>A Porte Aperte - Comune di Sarno</title> <link href="css/layout.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="divWrapper" > <div id="Header"> <div id="FotoSX"><img src="images/headsx.gif" alt="Comune di Sarno" /><img src="images/fascia02.jpg" alt="Comune di Sarno" /></div> </div> <div id="SidebarSx"><ul> <li><a href="(URL address blocked: See forum rules)">Risorse Utili</a></li> <li><a href="(URL address blocked: See forum rules)">Sportello online</a></li> <li><a href="(URL address blocked: See forum rules)">Leggi e normativa</a></li> <li><a href="(URL address blocked: See forum rules)">Storie di vita vissuta</a></li> <li><a href="(URL address blocked: See forum rules)">Lascia un commento</a></li> </ul></div> <div id="ContenutoCentrale"> <div id="Banner">X</div> <div id="Sportello Antiusura"> <ul> <li>SPORTELLO ANTIUSURA</li> <li>SEDE</li> <li>ORARI</li> <li>PROFESSIONALITA' COINVOLTE</li> </ul> </div> <div id="TestoInfo"> TESTO TESTO TESTO </div> </div> <div id="SidebarDx"> <ul> <strong>Links Utili<br /><br /> </strong><li><a href="(URL address blocked: See forum rules)">Enti ed instituzioni</a></li> <li><a href="(URL address blocked: See forum rules)">Regione</a></li> <li><a href="(URL address blocked: See forum rules)">Provincia</a></li> <li><a href="(URL address blocked: See forum rules)">Comune</a></li> <li><a href="(URL address blocked: See forum rules)">etc</a></li> <li><a href="(URL address blocked: See forum rules)">etc</a></li> <li><a href="(URL address blocked: See forum rules)">Associaczioni</a></li> <li><a href="(URL address blocked: See forum rules)">***1</a></li> <li><a href="(URL address blocked: See forum rules)">***2</a></li> <li><a href="(URL address blocked: See forum rules)">***3</a></li> </ul> </div> </div> </body> </html> and the CSS is: #divWrapper { width: 898px; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #AA0C00; border-left-color: #AA0C00; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; background-color: #FFFFFF; } #divWrapper #Header { background-color: #899933; padding-top: 15px; padding-bottom: 15px; } #divWrapper #SidebarSx { background-color: #BCCC66; display: list-item; list-style-type: none; padding: 15px; width: 150px; } #divWrapper #SidebarSx ul { margin: 0px; padding: 0px; list-style-type: none; } #divWrapper #SidebarSx a { padding: 8px; margin-top: 10px; margin-bottom: 10px; display: block; width: 150px; border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; border-top-color: #899933; border-bottom-color: #899933; text-decoration: none; color: #000000; } #divWrapper #SidebarSx a:hover { background-color: #DDE6B3; } body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.8em; color: #000000; background-color: #ACA151; margin: 0px; } #divWrapper #Header #FotoSX { float: none; text-align: center; } #divWrapper #ContenutoCentrale { float: left; padding-top: 20px; padding-right: 45px; padding-bottom: 20px; padding-left: 45px; list-style-type: none; background-color: #DDE6B3; width: 607px; } #divWrapper #SidebarDx { float: left; background-color: #BCCC66; width: 170px; padding: 15px; position: absolute; } #divWrapper #SidebarDx ul { margin: 0px; padding: 0px; list-style-type: none; } #divWrapper #SidebarDx a { padding: 8px; margin-top: 10px; margin-bottom: 10px; display: block; width: 155px; border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; border-top-color: #899933; border-bottom-color: #899933; color: #000000; text-decoration: none; } #divWrapper #SidebarDx a:hover { background-color: #DDE6B3; } Many thanks in advance !!!!!!!! Ernesto Hello, I building a page with a form. Tables would be super easy, but my client expects web 2.0 Here's the page: http://www.caillouette.com/Utilitrek/eight/members/search_inquiry.php I'm currently using <span class="form">, or <span> but look totally different on different computers (i.e. Firefox on PC or MAC) Here's my CSS: Code: .last_name
{
margin-right:230px;
}
.first_name
{
margin-right:220px;
}
Can anyone tell me the best approach? Basically I need each field's text to line up below and to the left. The form is a lot longer and has varied width fields throughout. Any help or ideas are appreciated. thanks -S |
|||||||