|
CSS - Adding Border Messes It All (in Ie)
Hi all,
with your great help, the pages looks now almost fine in both IE and FF. But, the photogallery looks much more better with all the photos bordered, like on this screenshot from FireFox. Unfornutely, when you check it in IE, all the images are messed around in a totally upredictable way (screenshot from IE). It was the same using vertical-align, but it's not so essential. So, is there please any solution to handle this? And is there a way how to center floating <div> within his parent <div> ("Unfortunately, there is no easy way to center floated elements." - But is there any way)? The red bordered div is floating, including all the images put in <div>, which are floating too, I'd love center the red bordered <div> inside the green bordered one. To be specific, I don't insist on the red bordered div to be floating, I just looking for a way how to center all the images inside the green bordered <div>. Here are CSS used: Fotogalerie.css, Web.css. Webdesign isn't really easy thing to learn , if all would work how it's supposed to work, it'd wonderful, but IE makes it all 3times harder , I really start to not to like him (more than before ) Similar TutorialsI have set up some links at the top of the page, and to make them appear more like buttons I have applied a background colour and border around them. Works a treat in Opera, Mozilla but IE is only showing the side border.. If I add a display type of BLOCK they run down the page as I expected but the borders are added right the way around. I have loaded the code for people to look at, from what I can see Im doing it correct, but not correct enough it seems. Code:
CSS
#nav {
position: absolute;
width: auto;
top: 112px;
left: 10px;
background-color: #ffffff;
z-index: 4;
}
/* If I add ':link' to the top selector the background and all borders drop off aswell as colour.*/
#nav a {
color: #203F71;
font-weight: bold;
text-decoration: none;
background-color: #FFFF00;
border: solid 1px #000000;
padding: 1px 5px;
}
#nav a:hover {
color: #FFFF00;
text-decoration: none;
background-color: #203F71
}
#nav a:active {
color: #203F71;
font-weight: bold;
text-decoration: none;
}
HTML
<div id="nav"><a href="#2" class="navLink">Property Search</a> <a href="#3">Services</a> <a href="#4">Holiday Letting</a> <a href="#5">Bayside Team</a> <a href="#6">Contact Us</a></div>
Hi, I'm having a strange problem. I finally got my layout designed so that it works in both IE and FF and will work scale correctly in relation to screen resolution but now with one aesthetic defect. I have it set up so that the side navigation and the body are scaled 25%:75% but I would like a "thin solid" border between the two. My problem is that when i add the border it exceeds 100% and pushes the main content area underneath the menu. Heres the code for the page; and yes the styles will eventually be moved to the external CSS. right now the only thing the external CSS provides is the body's background image. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title> TEST PAGE 2 </title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <link rel="stylesheet" type="text/css" href="stylesheets/default.css"> </head> <body> <!-- LOGO ROW --> <div id="logorow" style="background-color: #FFFFFF; height: 100px; border-bottom: medium solid #7D5D10;"> <img src="/Images/owlstreelogo.jpg" height="100px" width="300px" alt="Welcome to Owl's Tree"> </div> <!-- END OF LOGO ROW --> <!-- TOP NAVIGATION ROW --> <div id="topnavigationrow" style="background-color: #FFFFFF; padding: 0px 0px 0px 0px; font-weight: bold; text-align: center; border-bottom: thin solid #7D5D10;"> INSERT TOP NAVIGATION ROW LINKS HERE </div> <!-- END OF TOP NAVIGATION ROW --> <!-- CHANGING CONTENT AREA --> <div id="changingcontent" style="background-color: #FFFFFF;"> <!-- SIDE NAVIGATION AREA --> <div id="sidenavigation" style="background-color: #FF0000; width: 25%; float: left;"> </div> <!-- END OF SIDE NAVIGATION AREA --> <!-- BODY CONTENT AREA --> <div id="bodycontent" style="background-color: #0000FF; width: 75%; float: left;"> </div> <!-- END OF BODY CONTENT AREA --> </div> <!-- END OF CHANGING CONTENT AREA --> </body> </html> I want to add "border-right: thin solid #7D5D10" to the side navigation section but when I do i'm faced with this problem. Any idea on a solution to this problem? Oh yeah and as a side not all these sections will eventually have a white background so i'm not worried about the height of them not matching because it will be unnoticable, the sections are just colored so I can see where each section starts and ends. And another random question i'm not too worried about: If i fill a section (eg. the main content section) with a single character over and over past the width of the section without spaces it overflows and displays outside the div tags boundaries. Why does it do that? and is there anyway to make sure the text wraps in the extremely rare case this would happen? Thanks in advance to anyone reading this http://www.innerspect.net/blog/ can anyone confirm this? offer some fixes? Hello, I was wondering if someone could take a look at my website and tell me what the CSS error is and some possible work arounds or fixes. The problem is CSS is messing with links and general text/input boxes. This problem does not occur in Internet Explorer where the css isn't rendered correctly. If you take a look around the site you'll see the error in a few seconds. Not working in: Mozilla and Google Chrome url: egames.hostoi.com/test/home.html Hi to all of you, I've started this new page just this morning, i have some experience with sitebuilding and css but not much. the result can be found here I spent most of my afternoon trying to fix this little error in IE (works fine in FF, opera and netscape). I've tried everything I could find, box model, floating boxes, lots of tricks and hacks but nothing seemed to work (or I implementer everything the wrong way). The problem seems quite simple, it looks like it has something to do with padding or margin for as long as text appears in the left column things in the right column are shifted a little to the right. Pleas help me out on this one, thanks in advance, kind regards, Jef Hi, Im new to totally CSS designs im more a table guy but im trying and getting a problem if you look at http://www.michaelwoodward.co.uk/clients/RSS on the shop page when you go into a department the footer moves up to the top of the main content section - why?? its not related to the height of the page so im guessing is something to do with the databse driven information that is placed in there (in a table). Can anyone help? Thanks Hi I recently moved a site "http://www.nikkilamann.com/index.php" and after moving it the CSS is all messed up (style.css) The scroll frame box is not centred anymore and the scrollbar is supposed to be white in colour and there is some funny box next to "fashion" on navigation. Site is totally messed up after move. Does anybody know what could cause this? problems with positions divs and images within them ... when I have a positioned div, and I insert an image, or another div with image inside, it makes the div too high, and not sure how to get it straight. Code: ?>
<div id="cmp" style="position: absolute; left: <?=$cmp_left*$x_scale+$offx+$leftcolwidth+$xspace ?>px; top: <?=(($startrow*$y_scale)+($cmp_y)*$y_scale)-$offy ?>px; width: <?=($cmp_right-$cmp_left)*$x_scale+$leftcolwidth+$xspace ?>; height: <?=$y_scale+1 ?>; background-color: <? if( $cmp_row[ $j ] != null ) echo $cmp_row[ $j ]->type->getcolour( -1, $connect ); ?>; border: solid black 1px; z-index:<?=$i ?> " >
<div style="position: absolute; left: <?=$cmp_left*$x_scale+$offx+$leftcolwidth+$xspace ?>px; width: <?=($cmp_right-$cmp_left)*$x_scale+$leftcolwidth+$xspace-20 ?>; height: <?=$y_scale ?>;" align="left" width="20px" height="<?=$y_scale ?>px">
<? if( $cmp_row[ $j ] != null ) echo substr( rtrim( $cmp_row[ $j ]->getName() ), 0, $maxchars ); ?>
</div>
<div style="position: absolute; left: <?=$cmp_right*$x_scale+$offx+$leftcolwidth-20 ?>px; width: <?=20 ?>; height: <?=$y_scale ?>; align: right" >
<img src="images/<?=$icon ?>" alt=<?=$alt ?> border="0" <?=$mousey ?>>
</div>
</div>
<?
the code above has got a bit messy with trying to fix the problem... Cheers Adam Hi guys, This is another standard "why won't it work in IE"-post. I'm making a multi-column news-style site (<spam>first link in my signature</spam>), and IE screws up the widths. The layout is basically three .col's which are floated left, and a #menu on the right. Here's the relevant css: Code:
#menu
{
float: left;
margin-left: 0%;
width: 20%;
line-height: 120%;
padding: 2%;
font-size: larger;
}
.col
{
float: left;
width: 24%;
font-size: 0.8em;
}
.col ul{
list-style-type: none;
padding-left: 0;
}
.col .story{
background: #F5F8ED;
padding: 0 ;
margin: 1%;
border: 1px solid #71804D;
color: #333;
text-align: justify;
}
Here's some example html: Code:
<div class="col">
<ul>
<li class="story">
<p class="story_title"> story title </p>
<div class="story_body">
<p>blah blah</p>
</div>
<div class="sub">
<p>stuff</p>
</div>
</li>
</ul>
</div>
<div class="col">
<ul>
<li class="story">
<p class="story_title"> story title </p>
<div class="story_body">
<p>blah blah</p>
</div>
<div class="sub">
<p>stuff</p>
</div>
</li>
</ul>
</div>
<div class="col">
<ul>
<li class="story">
<p class="story_title"> story title </p>
<div class="story_body">
<p>blah blah</p>
</div>
<div class="sub">
<p>stuff</p>
</div>
</li>
</ul>
</div>
<div id="menu">
<div id="menu_title">
<h1> title </h1>
</div>
<ul id="navbox">
<li> ... </li>
</ul>
... etc
</div>
The problem is that IE renders the .col's very narrowly, and has some major space vertically between them. This means that #menu gets pushed down below the .col's. Can anyone point me in the right direction to fix this width issue? Thanks, Simon [edit] New question, see http://forums.devshed.com/css-help-...tml#post1377956 below for details. Thanks! --------- old question ------------ Hi, I'm trying to get some checkboxes aligned in a form that i'm creating. I can get it to work perfectly in Firefox, but not in IE6. In Firefox: In IE6: I don't care so much about the height/spacing issue as much as the left/right reversal. the relevant css(i think) is here Code: #application p {text-indent: 0px;}
#application div.col1 {width: 50%; float: left;}
#application div.col2 {width: 50%; float: right;}
#application label {
float: left;
width: 70px;
text-align: right;
height: 2em; line-height: 2em;
}
#application .label_checkbox {width: 100%;}
#application .label_checkbox p{
clear: both;
float: none;
position: relative;
}
#application .label_checkbox input {
position: absolute;
top: 1px;
left: 1px;
}
#application .label_checkbox label {
display: block;
margin-left: 22px;
text-align: left;
width: 160px;
}
and relevant xhtml: Code: <div class="label_checkbox">
<div class="col1">
<p><input type="checkbox" id="ch" value="Classroom Helper" name="roles" /><label for="ch">Classroom Helpers</label></p>
<p><input type="checkbox" id="lt" value="Literacy Tutor" name="roles" /><label for="lt">Literacy Tutor</label></p>
<p><input type="checkbox" id="ta" value="Technology Assistant" name="roles" /><label for="ta">Technology Assistant</label></p>
<p><input type="checkbox" id="ce" value="Campus Enrichment" name="roles" /><label for="ce">Campus Enrichment</label></p>
<p><input type="checkbox" id="ote" value="One-Time Events" name="roles" /><label for="ote">One-Time Events</label></p>
</div>
<div class="col2">
<p><input type="checkbox" id="frn" value="Family Reading Night" name="roles" /><label for="frn">Family Reading Night</label></p>
<p><input type="checkbox" id="rad" value="Read Aloud Day" name="roles" /><label for="rad">Read Aloud Day</label></p>
<p><input type="checkbox" id="dd" value="Dictionary Day" name="roles" /><label for="dd">Dictionary Day</label></p>
<p><input type="checkbox" id="gs" value="Guest Speaker" name="roles" /><label for="gs">Guest Speaker</label></p>
<p><input type="checkbox" id="other" value="Other" name="roles" /><label for="other">Other</label></p>
</div>
</div>
you can see the page at http://oaklandheroes.org/beta/application.php. Thanks for the help! As per suggestion, I have created a new thread in this forum. This is a follow on from my thread in the Javascript forum I have created a table which displays exactly how I want it to. It displays correctly in IE8, FF3.6, Opera & Chrome. What I've done is created some Javascript to remove the last column of the table. When this happens FF and Chrome (untested in Opera) redraws the table with the right edge column of the right-most column as I would hope it would - with the right edge style of the table as it was before the column was removed - in this instance, a solid black border. IE does not redraw the right border like this - it retains the internal column border, in this instance, a grey dashed cell border. I was wondering if there was a way to make IE behave? A demo is available at geostatsireland and it is a .com - the page name is mytable.html basically if i add a border around a button in FF i can click the button however the effect of "pressing" a button is lost.. IE mainatain this! is there a solution or will i have to live with it? Hi. Have created some simple tabs using table cells. Active tab should have bottom-border color equal to page background-color. Non-active tabs should have bottom-border=black. Works fine in IE, but does not work very well in Firefox. If I remove the border-collapse:collapse on the table, then firefox also work... but I would like to be able to keep the 1px border between each table cell. So is there a way to make this work in both IE and Firefox... and hopefully most other browsers... See code below: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<style type="text/css">
a.menu_top:link {color: #000000; text-decoration: none;}
a.menu_top:visited {color: #000000; text-decoration: none;}
a.menu_top:hover {color: #000000; text-decoration: none;}
a.menu_top:active {color: #000000; text-decoration: none;}
td.menu_top_passive {
background-color: #777;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
border-top: 1px #000000 solid;
border-bottom: 1px #000000 solid;
text-align: center;
cursor:pointer;
font-weight: bold;
padding: 5px 20px 5px 20px;
margin: 0;
}
td.menu_top_active {
background-color: #bbb;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
border-top: 1px #000000 solid;
border-bottom: 1px #bbb solid;
text-align: center;
cursor:pointer;
font-weight: bold;
padding: 5px 20px 5px 20px;
margin: 0;
}
</style>
<script language="JavaScript">
function change(id, url) {
for (i=1; i<6; i++){
eval("document.getElementById("+i+").className='menu_top_passive'");
}
eval("document.getElementById("+id+").className='menu_top_active'");
}
</script>
</head>
<body style="margin:0; padding:0; background-color:#bbb;">
<br><br>
<center>
1. Load the page.<br>
2. Click Item 4.<br>
3. Click Item 2.<br><br>
Why is the bottom border of the menuelements (table cells) not getting correct in Firefox?<br>
None-active menuelements should have a border-bottom = black, active should have same bottom-border as page.<br>
Notice that I use border-collapse on the table in order to get the cell-border 1px thick between the menuitems.<br>
If I remove border-collapse, then there is no strange behaviour in Firefox.<br>
Any way to get this working in Firefox without breaking it in IE?
</center>
<br><br><br>
<table border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse;">
<tr>
<td id="1" nowrap class="menu_top_active" onClick="change('1');"><a href="javascript:;" class="menu_top">Item 1</a></td>
<td id="2" nowrap class="menu_top_passive" onClick="change('2');"><a href="javascript:;" class="menu_top">Item 2</a></td>
<td id="3" nowrap class="menu_top_passive" onClick="change('3');"><a href="javascript:;" class="menu_top">Item 3</a></td>
<td id="4" nowrap class="menu_top_passive" onClick="change('4');"><a href="javascript:;" class="menu_top">Item 4</a></td>
<td id="5" nowrap class="menu_top_passive" onClick="change('5');"><a href="javascript:;" class="menu_top">Item 5</a></td>
</tr>
</table>
</body>
</html>
I'm a little puzzled by this weird display bug by IE7, this bug doesn't occur in IE6. It had to do with the DIV's CSS's border-style. If you set it to double then you notice some random bugs with it. Some of the time, the border is displayed without a problem. Some of the time, it is displayed with some gaps in the line as if it is not being drawn upon. Some of the other time, it is not displayed at all. I noticed if I switch from one tab to another then back, the border appeared as if nothing had happened. I also noticed that if I open the view source that overlapp the web browser then closed it, the border appeared as if nothing had happened. How do you fix that problem? Thanks... I would like to set up a table with a different border than the cells inside it. Here's my code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
TABLE {border: 1px solid black; border-collapse: collapse; width: 200px}
TD {border: 1px solid #ccc}
</style>
</head>
<body>
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
That's all hunky dory in (gasp!) IE, but good browsers...they only show the lighter gray color. How do I get the table border to be different? Hi, This used to be my solution: Code: <table border=1 bordercolorlight='#CCCCCC' Bordercolordark='#FFFFFF'> But this only works well on IE - not Mozilla Now I want to use CSS: Code:
.results {
border: 1px solid #CCCCCC ;
}
Code: <table class='results'> --------------- The problem is, with CSS, only the TABLE acquires the border property. The cells within it don't. If I specify Code: <td class='results'> for all the cells in the table, this also won't work, because the cell borders overlap each other and some border lines seem thicker than others (because of overlapping). Is there any simple way I can specify the border property for the table - in ONE declaration? I want the table and td borders all to be a simple 1px width ...is that possible in one declaration? Thanks a lot! Take a look <link removed... no longer valid> If you have I.E. and Firefox available... notice the differences... Take a look at the source... I.E. appears to display this "more correctly"... it's certainly more visually appealling. I want the border to go all the way around the calendar in FF (it already does in I.E.), and in FF the first week is messed up (probably has something to do with no information within the divs, but why does it do that? Bryan <edit>I'd also like to fix the gap on the right side between the days and the calendar border, but just making it 15% for the last one doesn't work.</edit> How do you create an inner border around a table in css, rather than a "solid" border which creates a border line around the table on the outer half. The border needs to butt up against an image, rather than leaving a pixel space. This is the coder I have so far. Nothing big: Code:
.solid {
border: solid 1px #000000;
}
Thanks. Hi guys. Can I change a table row border style like below?? Code: <tr style="border-bottom: solid 1px #DBDBDC";> how to create the free products heading over the border... with the border cut for tht part of the box ??? |
|||||||