|
CSS - Newbie ? Border Issues, And Ie Display Problems
Thanks for your time. Still learning design, so thanks for your help if they are easy solutions.
Border Issue: In IE and FF I have a complete border on a few header div's. The bottom and top border is different color than the left and right borders. You can see that the dark brown bottom and top borders appear to lay overtop of the white left and right borders. Website is he http://onlinecasinoboss.true2formde...e.php?page=home Styling CSS is he http://onlinecasinoboss.true2formde...aster-style.css Layout CSS is he http://onlinecasinoboss.true2formde...ster-layout.css IE Layout Issue: In FF the three center content columns display how I want it to look. When you view the same home.html page in IE you can see that they don't space out how I'd like. It is most visible by compairing the boxes on the right of the center content. Thanks a ton for your time and help, I appreciate it. Similar Tutorialswhen I look at this page in browser labs beautybylouise(dot)pleinaircreative(dot)com the top "hair image" disappears miles off to the right and takes the head div with it? any suggestions? I cant seem to work out the problem... I've searched the archives to no avail. I am layering some svg images with div tags, and have set borders around the images. They are maps, one is an overview of the larger one set in the upper right corner of the larger one. My overview svg image displays correctly over the top of the larger one, but the border is behind the larger one. I've tried z-index, position: absolute; top: and what not. Any insight would be most appreciated. Sean nevermind. i figured it out. Why do the margin-top values on these layers DO NOTHING in firefox, but act as expected in IE? Which way is actually correct? Also, if I add a float:left to the blue layer, firefox adds a margin-top to the blue and green layers only? This seems very wrong.. How can I get the expected margin-top on each layer? Code: <BODY style="background-color:yellow;"> <div id='blue' style="width:250px; height:250px; display:block; margin-left:1px; margin-top:10px; background-color:blue; position:relative;"> <div id='green' style='width:220px; height:200px; margin-top:10px; background-color:green; display:block; position:relative;'> <!--- prod selector box ---> <div id='gray' style='width:200px; height:150px; overflow:auto; margin-top:10px; margin-left:4px; display:block; background-color:gray; position:relative;'> asdf </div> </div> </div> </BODY> hello, i'm having a problem with the border on one of divs. the name of the div is content2. Depending on what I set the width to, it looks fine in IE or Firefox, one or the other. I used an image for the top and one for the bottom. I did the linkbanner on the left the same way, and that one worked fine. Anyone have any idea why i'm having this problem?? thanks, *j Hi, I have a list that shows the photo and some personal data of people. Here it is: http://www.tiregarfio.byethost17.co...ev.php/miembros username: fer password: m I you load it with FF, you can see clearly I have added a green line that separate each member (border-bottom: solid 1px #A9F16C). This line in IE6 is not between each member but below the personal data. Here it is the styles: Code: div.miembro {
overflow: hidden;
clear: both;
border-bottom: solid 1px #A9F16C;
}
div.fotografia {
float:left;
}
Any idea? Javi I'm trying to set up an IFRAME with a 1px solid border, no beveling - etc. It looks flawless in Mozilla, but no matter what I try... I cannot get IE to interpret the code properly. Here's what I have so far: Code: iframe {
border: solid 1px #727272;
height: 445px;
width: 100%;
padding: 0px;
}
Everything works fine in IE except for the border, which looks beveled and ugly, like a default frameborder Can someone please teach me how to overcome this? Thanks in advance! Basically I'm trying to set up a simple navigation with CSS as the tabs. My problem is this: 1. The off buttons I want to keep grey line at bottom, the on I want to remove the grey line so it appears to be part of the current page. 2. The left and right borders. I don't want them to be 2 pixels, however i'm having trouble figuring out how to always have them be 1 pixel (not 1 + 1 = 2) Thanks! Here what my code does: http://www.hward.com/test.html Here is how I'd like it to look: http://www.hward.com/want.gif Hi: I am using an image as the background in a <td> tag. Also, that <td> tag has a border on the top and bottom. When viewing this page in FF, the border sits perfectly against the image (and the <td> tag). When viewing this in garbage IE, there is a pixel line between the image and the border. What is the problem? What is the fix to get the borders to sit perfectly on the image? Here is the style for the <td> with id="header" Code:
#header {
background: #FFF;
background-image: url(include/head.jpg);
background-repeat: no-repeat;
height: 136px;
width: 100%;
background-position: right;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
}
And here is the <td> Code: <table id="main"> <tr> <td id="header"> <ul id="nav"> <li><a href="">Home</a></li> <li><a href="">Benefits</a></li> <li><a href="">FAQ</a></li> <li><a href="">About</a></li> <li><a href="">Pay Your Bill</a></li> <li><a href="">Contact</a></li> </ul> </td> </tr> </table> Thanks in advance. Link: http://www.wiu.edu/users/mujas2/test/ Also, if anyone has an idea about those tabs, let me know! Thanks in advance, please ask if further info is needed! Problem 1: I specified #pic with a height of 176px and a border of 1px. The total height should be 178px, correct? Measuring it with my handy web developer ruler, it only measures 176px tall, including the border or 174px excluding the borders. Why would this occur? Aren't borders supposed to go around an element not be included in the element? This occurs in both Firefox and IE. Problem 2: Same problem area as above, except I'm attempting to add 3px left and bottom margin around several #pic. Using my trusty ruler again, I'm getting a margin of only 1px around my #pic's. Instead, it appears that the margin is including the 1px border from the two #pics, totaling 3px. This only occurs in Firefox though, IE renders it as I would have guessed. This means that the .right content doesn't line up in either IE or Firefox, depending on which one I correct it for. Below is a picture to explain what I'm attempting to say. Here is the code (sorry I'm building it for a friend and he is working on a host -- so its local only): Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "(URL address blocked: See forum rules)">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body
{
background-color: #615947;
}
#container
{
width: 800px;
margin: 10px auto;
color: #333;
}
#nav
{
}
#navcontainer {
padding: 0;
height: 35px;
}
#navcontainer ul
{
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navcontainer ul li
{
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
width: 154px;
height: 16px;
}
#navcontainer ul li a
{
position:relative;
background: #AE0000;
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
padding: 8px;
margin: 0 0 0 0;
color: #f5d7b4;
text-decoration: none;
display: block;
text-align: center;
font: 13px/15px Verdana,Arial,Helvetica,sans-serif;
font-weight:bold;
}
#top
{
background-color: #AD9F7F;
background-image: url(<a href="(URL address blocked: See forum rules)" rel="nofollow">(URL address blocked: See forum rules)</a>);
background-repeat: no-repeat;
height: 150px;
width: 767px;
margin-bottom: 3px;
}
.left
{
display:inline;
border: 1px solid black;
background-color: #fff;
float: left;
width: 385px;
margin-bottom: 3px;
padding: 0;
margin-right: 3px;
}
#updates
{
height:539px;
}
#topleft
{
margin: 0px;
height: 14em;
border-bottom: 1px solid black;
}
#topleft h3
{
background-color: #9E9E9E;
margin: 0px;
color: white;
font-family: sans-serif;
padding-left: 12px;
font-size: 12px;
}
#bottomleft
{
height: 309px;
margin: 0px;
overflow: auto;
}
#bottomleft h3
{
background-color: #9E9E9E;
margin: 0px;
color: white;
font-family: sans-serif;
padding-left: 12px;
font-size: 12px;
}
.right
{
margin-left: 385px;
padding: 0;
width: auto;
background-color: #615947;
}
.pic
{
width: 186px;
height: 176px;
margin: 0px 3px 3px 0px;
border: 1px solid black;
float: left;
background-color: #616161;
}
#footer
{
clear: both;
margin: 0;
color: #333;
background-color: #AD9F7F;
border: 1px solid black;
width: 767px;
}
</style>
<title>CSS</title>
</head>
<body>
<div id="container">
<div id="top"></div>
<div id="navcontainer">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">THE ARTIST</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">GUESTBOOK</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
<div class="left">
<div id="topleft">
<h3>Welcome</h3>
</div>
<div id="bottomleft">
<h3>Daves daily news</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>
</div>
<div class="right">
<div class="pic"></div>
<div class="pic"></div>
<div class="pic"></div>
<div class="pic"></div>
<div class="pic"></div>
<div class="pic"></div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
Image link http://lh5.ggpht.com/_zKwoPOwgFUM/SyNwWAxR0ZI/AAAAAAAAAKI/CzOKCNVox3E/prob.jpg I've been wrapping my head around how to apply a border at the bottom of an image, using the following: .menupic:link { border-top: 0px solid #ffffff; border-right: 0px solid #ffffff; border-bottom: 0px solid #ffffff; border-left: 0px solid #ffffff; } .menupic:hover { border-top: 0px solid #ffffff; border-right: 0px solid #ffffff; border-bottom: 4px solid #ffffff; border-left: 0px solid #ffffff; } It works fine in Mozilla, but I just cannot get the hover to work in IE, unless the border is completely solid and 1px+ for all a: states (kinda defeats what I'm trying to do), and it also works if I add float:left/right (which also is no good, as that messes up my design). Anybody found a css work around this problem? Is it possible to tell CSS to make the border for say, a table, show on three sides? (Not one, not four, not two....three sides) Hello, I got a website with a table on it. This is how it looks in firefox 2.0: http://img139.imageshack.us/img139/9822/helpffkr6.jpg And here's how it looks in IE6: http://img111.imageshack.us/img111/9675/helpiehi7.jpg As you can see, where FF do display the table border, IE does not. Here's the simplified table code and the related css code: Table -> Code: <table class="listings" style="width: 100%;"> <tr> <td colspan="2" class="darkRow">Category 1</td> </tr> <tr> <td style="width: 30%" class="lightRow">Thread 1</td> <td style="width: 70%" class="lightRow">This is thread number 1.</td> </tr> <tr> <td style="width: 30%" class="lightRow">Thread 2</td> <td style="width: 70%" class="lightRow">This is thread number 2.</td> </tr> </table> CSS code -> Code: <style type="text/css">
table.listings{
border-collapse: collapse;
border-style: none;
}
table.listings tr{
border-style: solid;
border-color: #4D3D4D;
border-width: 1px;
vertical-align: top;
}
.darkRow{
background-color: #4D3D4D;
border-color: #4D3D4D;
color: white;
padding-left: 4px
}
.lightRow{
background-color: #BFACBF;
border-color: #4D3D4D;
color: #4D3D4D;
padding-left: 4px;
}
</style>
It seems as if IE doesnt support borders around a whole row, because when i add this: Code: table.listings td{
border-style: solid;
border-color: #4D3D4D;
border-width: 1px;
vertical-align: top;
}
With that also IE displays a border but not only around the whole row, but around all the cells individually, which is not my intention. Does anybody have an idea what i can do about this? thanks in advance. Hi Hoping someone can give me a pointer to a small problem I'm having: Trying to achieve rounded corner buttons for a tags on a website using CSS and a nested <span tag. Relevant example page is at: http://www.mytophost.co.uk/test/test.html Styles are in the test.html page and the images used are at: http://www.mytophost.co.uk/test/button.gif http://www.mytophost.co.uk/test/buttonh.gif http://www.mytophost.co.uk/test/end.gif http://www.mytophost.co.uk/test/endh.gif All looks fine for me in IE, but bg images align differently in FF. I realise it's probably something in my CSS that's not compliant and so that's why IE works and FF not ... Any help greatly appreciated. Hello, I am trying to make a website www.jazzsurlaplage.ch/2007/home.php (sorry for the french script over there) Here is the issue : One Firefox or IE 7, the partners box appears to the right side of the page, whereas on IE 6, it appears way at the bottom. you can check out the html source on the page itself (I've written it, not generated, so it must be pretty easy to get) and the css is over here : www.jazzsurlaplage.ch/2007/style.css Here is the part in the file where I define the side box : Code: /*===========SIDE NAVIGATION==================*/
#sideinfo{
left:600px;
width:200px;
position: relative;
margin-top:3px;
margin-bottom:0px;
}
.sidebox{
margin:0px 0px 0px 0px;
padding:15px 0px 0px 0px;
width:200px;
height:30px;
position:relative;
background:transparent url(images/sidehead.jpg) left top no-repeat;
}
.sidebox .sidebody{
position:relative;
padding:0px 10px 0px 10px;
background:url(images/sidebody.jpg) left top repeat-y;
margin-bottom:0px;
text-align:center;
}
.sidebox .sidefooter{
position:relative;
height:30px;
width:200px;
margin-top:0px;
background:url(images/sidefoot.jpg) left top no-repeat;
}
/*============================END SIDE BLOCK===========================*/
/
Here is the part in the html file where I insert the box : Code: <? //sidebar echo '<div id="sideinfo">'; echo '<div class="sidebox">'; echo '<div class="sidebody">'; echo '<img src="images/partenaires.jpg" />'; echo '<br />'; echo '<img src="images/partenaires/arg.jpg" />'; echo '<br />'; echo '<img src="images/partenaires/chatnoir.jpg" />'; echo '<br />'; echo '<img src="images/partenaires/coheran.jpg" />'; echo '<br />'; echo '<img src="images/partenaires/heineken.jpg" />'; echo '<br />'; echo '<img src="images/partenaires/semeuse.jpg" />'; echo '<br />'; echo '<img src="images/partenaires/jardinnerie.jpg" />'; echo '<br />'; echo '<img src="images/partenaires/raiffeisen.jpg" width="130"/>'; echo '<br />'; echo '<img src="images/partenaires/aurelys.jpg" width="130"/>'; echo '<br />'; echo '<img src="images/partenaires/mb.jpg" width="130"/>'; echo '</div>'; echo '<div class="sidefooter"></div>'; echo '</div>'; echo '</div>'; ?> What do I do, and where can I get more info on these kind of issues ? Thanks, Manojo Does anyone know why IE7 is displaying this page incorrectly (when compared to Safari, Chrome, FF, IE8)? http://www.harrisdesigns.ca/dev/bestratefinders I noticed the font size at the top increases missing up my "Savings Calculated" - I'm assuming an if IE7 statement on the fonts will fix that. However, more troubling is the way to shoves the left column down. Any tips advice or ideas are greatly appreciated. Thanks in advance, CH... SOLVED Essentially it was a couple of over looked css errors. Left column shoving down was a float error as I forgot set a width, the font size errors were fixed by setting the margins and paddings to on the H elements and using ".px" for font sizes over "em" This is yet again another mysterious issue I am having with CSS and the notorious Internet Explorer. I have two divs fashioned into boxes. One is floated to the left the other is floated to the right. The height looks fine in FF but when you look at the bottom border of said 'boxes' the one on the right draws up sooner than the one on the left (when viewed in IE). The CSS definitions for both divs have the same height specified. Any help at all is very appreciated. http://www.ioforge.com/contact intrigue.net -- please copy and paste (link not allowed here since I'm a new member) HTML & CSS both validate with no errors. The page displays correctly in Opera and Firefox, but in IE... 7+ does not color the menu (white), making it invisible <7 displays only half of the page I would love any assistance at all in getting this resolved (aside from bombing MS) Thanks in advance. -=-TS Ok I've been working on this for hours. WordPress is generating some HTML that isn't displaying correctly. At this point I'm just working with the following CSS and HTML: CSS: Code: div#navcontainer {
border: 1px solid blue;
padding-left: 20px;
margin: 0;
width: 177px;
position: relative;
left: 0px;
}
div#navcontainer div#pagenav li.pagenav { /* the outermost list item; seems to apply to the title of the section */
font-family: Tahoma, Verdana, Helvetica, Arial, sans-serif;
font-size: 14px;
padding-left: 0em;
padding-right: 16px;
margin-left: 0;
width: 175px;
font-weight: normal;
list-style: none;
list-style-type: none;
color: #4f2b0d;
}
div#navcontainer div#pagenav li.pagenav ul li.page_item current_page_item a: link {
display: inline;
padding-bottom: 12px;
color: #4f2b0d;
position: relative;
left: -20px;
}
/* these are the links */
div#navcontainer div#pagenav li.pagenav ul li.page_item a:link { /* any Page item */
display: inline;
width: 175px;
font-weight: normal;
color: #4f2b0d;
line-height: 18px;
margin: 0;
padding-bottom: 0.25em;
text-decoration: none;
list-style: none;
list-style-type: none;
}
div#navcontainer div#pagenav li.pagenav ul li.page_item a:hover { /* any Page item */
display: inline;
width: 175px;
font-weight: normal;
color: #4f2b0d;
line-height: 18px;
margin: 0;
padding-bottom: 0.25em;
text-decoration: underline;
list-style: none;
list-style-type: none;
}
div#navcontainer div#pagenav li.pagenav ul li.page_item current_page_item a:link {
font-family: Georgia;
font-size: 36px;
color: #4f2b0d;
}
HTML: Code: <div id="inside_left_column">
<div id="sidebar">
<ul id="navcontainer">
<ul class="pagenav">
<li class="pagenav">About JCDS
<ul>
<li class="page_item page-item-58"><a href="...?page_id=58" title="Our Mission">Our Mission</a></li>
<li class="page_item page-item-56 current_page_item"><a href="...?page_id=56" title="Welcome from the Head of School">Welcome from the Head of School</a></li>
<li class="page_item page-item-60"><a href="...?page_id=60" title="School Leadership">School Leadership</a></li>
</ul>
</li>
</ul>
</ul>
</div>
</div>
I'm attaching screenshots of what it looks like now (purple underlined links, section title not bold, too much indentation, bullets displaying for all pages), and what I want it to look like (brown text, bold text for section name, no underlines (only on hover), left-aligned, bullet only on current page). I would love to get some help with this! -- TIA Laura S. here is the site http://142.177.157.241:8080/bikers/ Well, I have some work to do about opera and IE since they are slow in the browsers making or the standards compliance. Even Opera8 doesn't suport my site and I think that was just released not too long ago. I think I'm going to be changing my browser of choice from Firefox to Netscape 8. I have the beta right now and it looks awesome and has all the functionality of Firefox I want plus it makes it easy to change between IE and netscape without actualy going to IE to see how my site looks. Two birds with one stone. |
|||||||