|
CSS - Expert (??) Help Needed
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! Similar TutorialsI need to have a div that behaves like a table with two columns Code: <table> <tr><td rowspan=3><img></td>row 1<td></tr> <tr><td>row 2</td></tr> <tr><td>rpw 3</td></tr> </table> so far i have been using floating divs to achieve this. Code:
<div onclick="foo();">
<div style="float:left;"><img></div>
<div style="float:left;">
<div>row 1</div>
<div>row 2</div>
<div>row 3</div>
</div>
</div>
however there is a problem in IE only. my main div has an onclick handler. when floating divs are used, the onclick only works when you click text or image inside the div. is there a way i can avoid using floats and achieve the same result? Hi there...First post in this forum cause Firefox (and mozilla / netscape) are driving me mad! Please consider the following code: Code: <html>
<head>
<style type="text/css">
@media print {
p {font-size:11px;text-align:justify;}
table {width:100%;}
}
</style>
</head>
<body>
<table width="770" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFCC">
<tr>
<td>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam molestie, tortor id tempor fringilla, ante massa consequat dui, eget fermentum ante dolor sed felis. Curabitur mollis, velit sit amet lobortis pulvinar, mi lorem condimentum metus, cursus malesuada lectus leo in purus. Suspendisse vehicula, nisl ac varius iaculis, purus felis sodales lorem, in porttitor massa risus a odio. Cras urna felis, sagittis bibendum, ultrices vel, accumsan ac, pede. Maecenas felis nisl, rhoncus non, imperdiet in, tincidunt vitae, ante. Vestibulum cursus, elit non rutrum eleifend, arcu ligula bibendum velit, eget pharetra dui ipsum et tortor. Praesent lectus felis, consectetuer a, varius fringilla, elementum quis, diam. Morbi posuere sem eget odio. Pellentesque imperdiet tellus eget augue. Aliquam et tortor et libero nonummy tristique. Sed feugiat pellentesque sem. In hac habitasse platea dictumst. Vivamus a ipsum eu odio fringilla scelerisque. Ut et neque. Sed fermentum neque nec pede. Morbi enim erat, tempor nec, porttitor eu, tempus ut, nunc. Pellentesque lacinia dapibus urna. Curabitur leo tortor, cursus quis, semper quis, luctus ac, quam. Phasellus sit amet nisl. Nullam molestie nonummy lorem. Etiam consectetuer, ante in lacinia molestie, tellus nisl tincidunt dui, in commodo lectus elit ut elit. In ornare fermentum ante. Nullam felis. Maecenas tempor, lectus vel dignissim tincidunt, metus erat feugiat odio, eu dapibus mauris orci vitae enim. Etiam quis quam vitae risus aliquam iaculis. Ut nunc nulla, hendrerit ut, auctor id, ullamcorper a, risus. Integer fringilla, erat eu interdum imperdiet, lorem purus fermentum wisi, at mattis lectus nisl sit amet ante. Cras dolor. Nunc elementum quam at ligula. Maecenas ut mi ornare neque suscipit vulputate. Praesent ornare. Pellentesque nonummy posuere massa. Morbi sed risus et purus eleifend pulvinar. Proin suscipit ultricies enim. Morbi luctus. Nam quis sem. Quisque mattis. In laoreet velit eu nunc.
</p>
</td>
</tr>
</table>
</body>
</html>
This is basically a reconstruction of an existing problem of a far more complex design...in any case, if you try to print->Preview from Opera or IE 5+ everything is sweet...However, Firefox (and the other Gecko browsers) will not properly justify the text when previewing. More precisiely: Firefox will wrap text over 12px correctly yet for small text, the p block will not wrap properly and some text will be cropped. I'm not fussy about justification but even when I removed it I would get the same problem. I'm sure there's a perfectly logical solution to this problem. Maybe the width:100% gets inherited by the td and p but that should not affect the layout...Despite my various experiements of chaging the width and the wrapping properties, I could not solve this. I'm still learning the intricasies of block elements in CSS2 so I would definitely appreciate any help! Thanks in advance, Angelos Hi, I have over 7 years of programming experience. For demonstration of my development skills (or just to see something cool) visit the following link: URL I am experienced teleworker with solid knowledge of computers and Internet. If interested feel free to send me e-mail: theitf @t theitf | net Regards, Lubo I have been developing an intranet app which is to use a number of CSS/Javascript features for the required interactivity. The page I am having trouble with will eventually be integrated in an iframe. That said, I believe the conflict is coming from the top horizontal bar which has a fixed position. When the green bar (which will represent Gantt data) is clicked I have a small "hover" note which will display a brief summary. I had tested each of the page components individually, and had them working, and am now integrating the various pieces. The problem is that in IE when the bar is clicked, the note seems to display correctly, but the top of the #content div blacks out (or sometimes distorts strangely) and requires a page refresh to right the display. There is too much code to place here, so the page is available at: http://www.brianwurster.com/layout/test.php Any help with this problem would be GREATLY appreciated as I am having a terrible time disgnosing the problem. 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 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 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 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 Hey all, I need some help with a very basic CSS file. Honestly, it is so basic, that I've never done it before, and I can't get it to work. So, basically, what I have, is a flash file, that I want to be in the center of my page. However, in the flash file is a banner, that I want to continue at the sides, using repeating backgrounds. What I need is a simple three column CSS file, where the center has a fixed with of 887px (the width of the swf-file) and the left and right columns change their width to whatever width the visitors web browser has. I just can't get it to work. Can anyone help me? Thanks a lot. Regards. 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 Can someone please explain why this page looks this way? It's happening in all the browsers used. http://cjenkinsweb.com/shutterstock_submit.JPG here is the way it normally looks, in terms of style. Of course you will not be logged in, so it is not the same content. http://submit.shutterstock.com/main.mhtml I would appreciate an opinion. Thanks. If you look at this web site http://www.mobilvox.com/ you can see when the screen is smaller than what they designed for the scrollbars come into the window and it scrolls. I've been using the code below, and I can't seem to get the same behavoir. Code: <style type="text/css">
/*<![CDATA[*/
html, body {
margin: 0;
padding: 0;
background-color:#000033;
}
body {
font: 100%/1.25 verdana, arial, sans-serif;
color: black;
background-color: #eef;
overflow: auto;
}
p {
font-size: 1em;
margin-bottom: 0;
}
p + p {
text-indent: 1em;
margin-top: 0;
}
#header {
color: #000000;
background-color: #fff;
overflow: auto; /*encloses float children
see http://garyblue.port5.com/webdev/floatdemo.html
*/
text-align: center;
}
#header ul {
list-style: none;
margin: 0;
padding: 0;
}
#headermenu1 {
float: left;
text-align: right;
margin-left: 2px;
display: inline; /*this is a fix for IE's doubled
float margin bug*/
}
#headermenu2 {
float: right;
text-align: left;
margin-right: 100px;
display: inline; /*same as above*/
}
#global {
margin:0 auto;
width:500px;
text-align: left;
}
can someone point out the problem. - Thanks - Kris Hi, I'm using SIFR for the headlines on my website, to replace my <h1> text. Please look at http://209.172.34.108/~free/kpformations/test.html The three paragraphs are all <h1> tags but have different sizes. The CSS stylesheet is in the source of the page. Please can you have a look at this and tell me is there any way I can make the <h1> tags the same size and not resize autmatically? I have tried changing the font line height but that didnt work. Please help! 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? 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 |
|||||||