|
CSS - Tables & Css... Part 2 (kinda)
I seem to be having quite the time with Tables and CSS, specifically in regards to column alignment.
My previous post was about whether it is possible to have different column widths for the same column in different rows. I have since given up on that endeavour, deciding instead to use CSS aligned DIV tags instead. :^/ However, now I'm having a serious problem with setting the widths of two columns in a table using CSS. The table is quite simple. It's a single table with 5 rows that span two columns, and one row that contains the two columns. The problem is that I want the width of the first column to be 150px with no padding in the cell at all. The column next to is should take up the remainder of the space of the row and have 20px padding on the left and right sides of the cell. While I'd assume this would be an easy task, it appears that it's not to be. Instead, the first column ends up being a VERY large size if there is nothing (ie: text) in the column, and comes out VERY strange when there is something in it. The code is below: PHP Code: <html> <body style="margin-top:0px; margin-left:0px; margin-right:0px; margin-bottom:0px; background-color:#FFFFFF; text-align:center; vertical-align:top;"> <table style="border-collapse: collapse; margin-left:auto; margin-right:auto; width: 750px; height:100%; border-left:#000000 1px solid; border-right:#000000 1px solid;"> <tr> <td colspan="2" style="width:100%; height:200px; border-bottom:#000000 1px solid; padding-top:0px; padding-bottom:0px; padding-left:0px; padding-right:0px;"> </td> </tr> <tr> <td colspan="2" style="width:100%; height:26px; background-color:#FF0000; border-bottom:#000000 1px solid; text-align:right; padding-top:0px; padding-bottom:0px; padding-right:7px;"> </td> </tr> <tr> <td colspan="2" style="width:100%; background-color:#FFFF00; height:15px; padding-left:0px; padding-top:0px; padding-right:0px; padding-bottom:0px;"> </td> </tr> <tr> <td colspan="2" style="width:100%; border-top:#0000FF 1px solid; border-bottom:#0000FF 1px solid; background-color:#00FF00; height:40px; padding-left:15px; padding-top:10px; padding-right:10px; padding-bottom:10px;"> </td> </tr> <tr> <td style="width:150px; background-color:#0000FF; vertical-align:top; text-align:center; border-right:#000000 1px solid; border-bottom:#000000 1px solid; padding-left:0px; padding-top:0px; padding-right:0px; padding-bottom:0px;"> Something01 </td> <td style="background-color:#00FFFF; vertical-align:top; border-bottom:#000000 1px solid; padding-left:20px; padding-top:0px; padding-right:20px; padding-bottom:0px;"> Something02 </td> </tr> <tr style="background-color:#FFFFFF; height:24px;"> <td colspan="2" style="width:100%;"> </td> </tr> </table> </body> </html> Each cell is colored to help identify each one. Is there something blatently obvious that I'm missing or is this a REALLY bad bug that just *happens* to affect Mozilla (Firebird 0.61) AND Internet Explorer 6.0? Any help is MUCH appreciated. :^) - coredumped. Similar TutorialsAll my text on my blog looks really edgy especially when it's italic although the font I chose is Arial. It's kind of like it's "unsmooth", if you know what I mean. It does help abit whenever I set a font on bold, but I dont think I'd wanna set everything on bold. Some help, please? Thanks in advance! I'm not confident enough with CSS to just use it, so I'm mixing it with some tables too. I want a layout with two tables next to each at the top and then another below. The two at the top are working fine, but the one below keeps jumping back up to the top. I've managed to get an ugly fix by putting in a load of <br> but this doesn't work in IE7 (unless I add a lot more, pushing the content way down in other browsers) and isn't much of a solution. The other problem I have is that I want to have the majority of my page with a white background, but to get a surrounding border I've set the body background to be a colour and then placed a div around all the content. I want this div to be the size of the page and so set it's height to 100%, but this makes it too small. Not sure why. Here is my code for my page and CSS. If anyone can help I'd be most grateful. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="incl/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function navon(num) {
document.getElementById("nav" + num).style.backgroundColor = '#CDEB8B';
document.getElementById("nav" + num).style.paddingTop = '0px'
document.getElementById("nav" + num).style.paddingBottom = '0px';
document.getElementById("nav" + num).style.borderTopWidth = '10px';
document.getElementById("nav" + num).style.borderBottomWidth = '10px';
}
function navoff(num) {
document.getElementById("nav" + num).style.backgroundColor = '#C3D9FF';
document.getElementById("nav" + num).style.paddingTop = '8px'
document.getElementById("nav" + num).style.paddingBottom = '8px';
document.getElementById("nav" + num).style.borderTopWidth = '2px';
document.getElementById("nav" + num).style.borderBottomWidth = '2px';
}
//-->
</script>
</head>
<body>
<div class="main">
<table width="29%" border="0" cellpadding="2" cellspacing="5" align="left">
<tr>
<td><img src="" alt="" width="230" height="80" border="0" /></td>
</tr>
</table>
<table width="70%" height="60px" border="0" cellpadding="2" cellspacing="5" align="right">
<tr>
<td width="180px" class="nav" id="nav1" onmouseover="navon('1')" onmouseout="navoff('1')">link</td>
<td width="180px" class="nav" id="nav2" onmouseover="navon('2')" onmouseout="navoff('2')">link</td>
<td width="180px" class="nav" id="nav3" onmouseover="navon('3')" onmouseout="navoff('3')">link</td>
<td width="180px" class="nav" id="nav4" onmouseover="navon('4')" onmouseout="navoff('4')">link</td>
<td width="180px" class="nav" id="nav5" onmouseover="navon('5')" onmouseout="navoff('5')">link</td>
</tr>
</table>
<br /><br /><br /><br /><br /><br />
<table width="100%" border="0" cellpadding="2" cellspacing="5" align="center">
<tr>
<td width="70%">
some content
</td>
<td width="30%">
some more content
</td>
</tr>
</table>
</div>
</body>
</html>
Code:
@charset "utf-8";
/* CSS Document */
body {
padding-right: 4%;
padding-left: 4%;
padding-top: 30px;
padding-bottom: 30px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
letter-spacing: 0.1em;
color: #000000;
background-color: #EEEEEE;
}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
color: #000000;
text-decoration: none;
}
a:active {
color: #000000;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: underline;
}
.main {
background:#FFFFFF;
border: 10px solid #36393D;
width: 89%;
padding: 5%;
}
.nav {
padding: 8px;
background-color: #C3D9FF;
vertical-align: middle;
text-align: center;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 24px;
color: #36393D;
cursor:pointer;
border: 2px solid #36393D;
}
First of all, i'd like to thank Arnica who helped me with the first part of this post (CSS to table HELP). This is what Arnica helped me with befo (left corner image)(<== top back ==>)(right corner image) where <== and ==> represent streching horizontally in both directions. Now, i need help once again. I'd like to have side border images that strech vertically and while the body background image streching in all directions, vert and hor. Here's what i mean: (^ left border v)(<== body back ==>)( ^ right border v) where ^ and v mean streching vertically and <== and ==> mean streching horizontally. this is what i came up with so far: Code: <table width="100%" border="0" cellpadding="0" cellspacing="0"> <!--title bar--> <div style="margin: 0px; position: relative; float: left; width: auto; height: auto; "><img src="img_inside_article_title-bar_left.gif"></div> <div style="margin: 0px; position: relative; right: 6px; float: right; "><img src="img_inside_article_title-bar_right.gif"></div> <div style="margin-left: 7px; margin-right: 7px; height: 30px; width: auto; position: relative; left: -3px; background-image: url(tile_inside_article_titlebar_bak.gif); "> This is a test</div> <!--article--> <div style="position: relative; float: left; width: 10px; height: auto; background: url(images/layout/home_tech-images/tile_inside-window_left-border4.gif); " > </div> <div style="position: relative; width: 10px; float: right; right: 6px; background: url(images/layout/home_tech-images/tile_inside-window_right-border4.gif) right repeat-y; "> </div> <div style="margin-left: 10px; margin-right: 10px; height: 30px; width: auto; height: auto; position: relative; background: url(images/layout/home_tech-images/tile_back1.gif); "> This is a test<br>and again</div> </table> !!my appologies for the sloppy code, still learning!! In ie the above code works perfectly, the code under <!--article-->, where the borders strech in respect to the text in the center, but in firefox the sides strech for ever vertically!! HELP!!!!!!!!!!!! fz105 On two pages of my site: mileswright . com/?page_id=324 and mileswright . com/?page_id=331 it seems that part of the CSS file is being ignored. If you look at any of the other team members such as: mileswright . com/?page_id=334 you will see that the content div has padding being applied to it. In the first two pages though, the content div is being ignored. I'm really at a loss as to why this is happening. If anyone can shed some light on it I would be very grateful! (I apologize for the links not working but since I am a new poster I can't post links, but I figure that it would be pretty worthless if I didn't give links.) On my website I've a few CSS files that I call. Occasionally a page will load and some text won't properly format... It will be too big. I'll refresh and it will go back to the size it's supposed to be. It's not all the text, just here or there. I've tried this on multiple computers and multiple browsers and it still happens only once in a while. Anyone know what is going on? Is there any way to diagnose this? It SEEMS as if part of the file isn't loading, but that doesn't sound right. hi, is it possible to have a bg in a cell only to go half way accross the cell? Hi, I'm having difficulty with css working correctly. When i udeclare the a:hover state, only part of the code executes (see css code below). I want to invert the colours on the mouse over state i.e. green bg & white text TO white bg & green text. I've tried using w3schools 'try-it' windows and it works fine there but only partly executes on my page, has anyone got any ideas as to the cause of this? I've included all related code. Thanx, Steve CSS code: Code: #level1_nav a {
text-decoration: none;
font-variant: small-caps;
color: #FFFFFF;
}
a.lvl2_link:link, a.lvl2_link:visited {
color: #FFFFFF;
background-color: #5C685B;
text_decoration: none;
font-variant: normal;
}
a.lvl2_link:hover {
color: #5C685B;
background-color: #FFFFFF; //this is the only line that executes
text_decoration: underline;
font-variant: normal;
}
HTML code: Code: <ul id="level1_nav" style="clear: both;">
<li><a href="companyhome.html">Home</a></li>
<li><a href="javascript:subnav('servicessub')">Services</a></li>
<li id="servicessub">
<div class="level2_nav">
<div><a class="lvl2_link" href="test1.html">Test 1</a></div>
<div><a class="lvl2_link" href="test2.html">Test 2</a></div>
<div><a class="lvl2_link" href="test3.html">Test 3</a></div>
<div><a class="lvl2_link" href="test4.html">Test 4</a></div>
<div><a class="lvl2_link" href="test5.html">Test 5</a></div>
</div>
</li>
</ul>
Thanks to Kravvitz I was able to get the first version of this system up and running, but I didn't like the plain tabs so I switched them out with tabs of my own and also a background image (instead of just a color) for the subnav bar. I am having trouble lining the tabs up though so they have 1 or 2 px spaces between them and the text is centered on them. (I'm trying to right align the tabs). Also in IE the on tab merges with the subnav bar as it should (so the gradiant looks seemless) but in Firefox it does not... The images are he http://yourthreshold.com/downloads/nav_background.gif http://yourthreshold.com/downloads/..._background.gif http://yourthreshold.com/downloads/..._background.gif The code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
/*
passes tests in Firefox, IE5.5+/Win, Netscape 6+, and Opera 7+
IE5.0/Win just isn't handling the z-indexes correctly.
*/
/* Menu */
body {
color: #333;
background-color: #fff;
padding: 20px 0 0 20px;
margin:0;
font-size: 90%;
}
body,a,* {
font-family: helvetica, arial, geneva, lucida, sans-serif;
}
h1 {
font-size:1.5em;
font-weight:normal;
margin:1em 0;
}
ul#topnav {
margin:1px 0 10px;
padding: 0 0 0 12px;
list-style-type: none;
border: 0 none;
position: relative;
left:-50px;
width: 55em;
}
/* \*/
* html body {
font-size: 85%;
}
* html ul#topnav {
left: 0;
}
/* */
@media screen and (min-width: 0px){
ul#topnav {
left: -33px;
}
}
#topnav li {
display: block;
margin: 0;
padding: 0;
float:right;
}
#topnav a {
display:block;
color:#444;
text-decoration:none;
background: url(images/nav_background.gif) no-repeat;
margin:0;
text-align: right;
padding: 0.2em 36px 0.2em 3.4em;
position: relative;
font-weight: bold;
top: 0;
font-size: .8em;
}
#topnav li a.a0 {
left: -3px;
z-index: 151;
}
#topnav li a.a1 {
left: -2px;
z-index: 152;
}
#topnav li a.a2 {
left: -1px;
z-index: 153;
}
#topnav li a.a3 {
left: 0px;
z-index: 154;
}
#topnav a:hover {
background: url(images/nav_background.gif) no-repeat;
}
ul#topnav li a.here {
background: url(images/navHERE_background.gif) no-repeat;
z-index: 310;
}
/*ul#topnav li a.here {
z-index: 210;
background: url(images/lia.gif) no-repeat;
/*border-right: 1px solid #777;
padding: 0.2em 10px 0.2em 3.4em;
margin: 0 2px 0 0;
}*/
ul#subnav {
list-style-type: none;
position:absolute;
z-index:201;
margin: -1px 0 0;
right: 0;
padding: 1px 30px 3px 0px;
background:url(images/subnav_background.gif) repeat-x;
border-top:1px solid #fff;
width: 720px;
height: 22px;
min-height: 1.2em;
}
/* \*/
* html ul#subnav {
width: 748px;
wid\th: 730px;
}
/* */
#subnav li {
position:relative;
z-index:102;
display: block;
margin: 0;
padding: 0;
float:right;
}
#subnav a,#subnav a:hover,ul#topnav li #subnav li a.here {
color:#fff;
display:block;
text-decoration:none;
margin:0;
padding: 2px 10px 2px 12px;
background-color: transparent;
background-image: none;
border: 0 none;
}
#subnav a:hover,ul#topnav li #subnav li a.here {
color:#444;
}
/*Structure*/
* {
margin: 0;
padding: 0;
}
body {
margin:0;
padding:0;
text-align: center; /* IE5/Win fix */
}
#wrapper {
width:750px;
height:100%;
margin:0 auto 0 auto;
border:1px solid green;
text-align: left;
}
#top {
width:750px;
height:60px;
}
#logohead {
width:370px;
height:60px;
border:1px solid blue;
float:left;
}
#toplinks {
height:60px;
width:365px;
border: 1px solid orange;
margin-left:380px;
}
#nav{
width:750px;
height:50px;
/*border:1px solid pink;*/
}
#midbanner {
width:auto;
height:170px;
border:1px solid red;
}
#bottomcontent {
width:auto;
height:auto;
border:1px solid #990; /*yellow;*/
}
/* \*/
* html #bottomcontent,* html #midbanner {
width:750.5px;
wid\th:760px;
}
/* */
</style>
</head>
<body>
<div id="wrapper">
<div id="top">
<div id="logohead">Logo Here</div>
<div id="toplinks" align="right">Login Link Here</div>
</div>
<div id="nav">
<ul id="topnav">
<li><a class="a3" href="../fresh/about.htm">About</a></li>
<li><a class="a2" href="#">Tools</a></li>
<li><a class="a1" href="#">Hosting</a></li>
<li><a class="a0 here" href="#">Home</a>
<ul id="subnav">
<li><a href="#"> </a></li>
</ul>
</li>
</ul>
</div>
<div id="midbanner">Flash Banner Here</div>
<div id="bottomcontent">Bottom Content Starts Here</div>
</div>
</body>
</html>
Hi All, I have my site that uses CSS, however at times I want certain parts of it to not use the CSS. Not whole pages, just a section of a page. Is there anyway to remove all CSS formating in a section? So eg: <div style='none'> Some HTML </div> TIA Charlie Hi and thanks for the help so far Kravvitz. I checked my menu out on IE and got the following results (see screen captures below). You can probably see the element doesn't seem to go to the edge of the dropdown. Because of this the next ul level is appearing right beside the highlighted area (as it would normally), but since it isn't going to the end of the 'row' it is resulting in overlapping! Is there a way to make this work out in IE as well that you could recommend? Thanks. www.devwebsites.com There is a little strip of lightened color on that part and I don't think its from the images at least..I can't for the life of me figure out what is causing it. Thanks Quick nagging question that's been bothering me for some time. Fortunately, I have a link to explain the problem. If you go to our web page (link below), you will see that we have a DIV section on the left side of the page which displays a mini You Tube video, along with a few other buttons: http://bit.ly/gL9sA8 The problem is that when you shrink the window, that particular div will shy away outside the bounds of the browser window. Is there anyway to not have it disappear, but at the same time, not have the main content overlap it in anyway. In other words, how would you code the DIV tag so that the following two things happen: 1. It's always in view on the LEFT side of the webpage 2. The main DIV stops against it, and doesn't overlap it if resized As you can see, if you shrink the size of the window, our main div area (div id: mainWrapper) is always going to be centered which is the most important thing. However, we want to have a left (or right) side area to display buttons like that. Here is the current code for that left sided DIV column: Code: <div style="position:fixed; margin-left: -180px; top: 75px;"> // My html content for mini You Tube video & button is here </div> The problem is that if a person has a low resolution monitor, this left hand div is out of view and never seen.....or even worse, it's partially seen and not fully displayed because it's hiding outside the bounds of the window. My goal: To have it fixed to either the outer LEFT or RIGHT side of the webpage, just along the edge of the mainWrapper as you see it now. If I can clear anything up as to what I'm trying to explain, please let me know. I hope one of you awesome gurus can point me in the right direction! I cannot post the site, since I am a new user, but I will try to explain the situation. I have several pictures which have 50% opacity. On hover, the picture becomes fully opaque. Additionally, every picture has a semi-transparent caption as an overlapping div. Chrome displays the situation correctly, however IE just cuts off the part of the picture underneath the div. So I am left with pictures that are cut off at the bottom. The fading is done by jQuery. Everything described above only happens to JPEGs, PNG-s don't have this problem. Everything works fine in Chrome, but IE doesn't want to cooperate on this one. I will try to select some of the relevant code: The image: Code: <img width="150" height="150" src="xxx" class="portfolio-image" onmouseover="$('td#pitem_1').css('filter', 'alpha(opacity=60)');$('td#pitem_1').fadeTo(300, 1); $('#ptext_1').fadeTo(300, 0.8);" onmouseout="$('td#pitem_1').fadeTo(500, 0.5);$('#ptext_1').fadeTo(500, 0 );">
First css attribute is to address an IE bug where first fade doesn't happen. #pitem_1 is the whole td containing the image and the caption div. #ptext_1 is the caption. Here's the CSS. Identifiers should be obvious. Code: table.portfolio td{
opacity: 0.5;
filter: alpha(opacity = 50);
-moz-opacity:0.5;
background: #FFF;
}
img.portfolio-image{
}
div.portfolio-caption{
margin-top: -23px;
height: 10px;
background: #000000;
font-family: Verdana;
font-size: 10px;
padding: 5px;
color: #FFF;
z-index: 999999;
opacity: 0;
filter: alpha(opacity = 0);
-moz-opacity:0;
}
I'd appreciate all suggestions and tips. Hello I have a small image. What I want to do is use the image as a background image, but only display a small section of that image and repeat that section over and over, depending on how much content is on top of the image. I hope I made that clear enough to understand. I have the following code: Code:
<style>
.vote {
background-image: url('images/vote.gif');
background-repeat: repeat-y;
background-position: 0 -45;
height: 50px;
width: 199px;
}
</style>
<div class="vote">
d<br /><br /><Br /><br /><BR /><BR /><br /><br /><br /><br />j
</div>
That code displays only part of the image, as I want it to, however, I do not know if it is possible to now repeat just that section of the image again and again. I hope someone understands and can help. Thanks Dear All, I have a question - Background : I used the E-book "designing without tables" and created a page with 2 columns. A 200 px column on the left for the links and the rest on the right for the data. There is also a header column on the top with has main menu. Question 1 : If there are 5 links on the left column, how can I link the pages such that when I click on a link on the left column..only the right column should refresh. Meaning, I want the left column to be static with the links and only the right column should be refreshed? Is it possible to do so using only CSS and HTML ? Thanks in advance. Regards. Hey guys, I missed a day of my XHTML class in college and he went over most of the CSS that day, I was sick with the flu and he said that day was the most important, so I'm lost, I need to "Remove any <b>, <i>, <u> and <font> tags and replace them with inline CSS code." So i come up with something like this <Style Type="css/text"> <B style="color:blue> This is my display text </b> </style> PLEASE HELP ME WITH THIS INLINE CSS! HELP! I'M LOSTTTT! Hi, i have a styling problem. The page looks well in normal view in IE and firefox but when you zoom in the page (Ctrl++) the menu bar part of the page gets displaced from its position (right and left corner). your help and guidance wil be much appreciated. The page is at dev.cddimensions. com . Plz try to zoom in and notice the menu bar. hi, I am fairly new to css and working on a website with a complete css layout for the first time, one I got from dreamweaver. I thought things were going great because I did all my testing in Firefox (like a good boy) but then I tried to test it in Internet Explorer 6 and alot if not all of my webpages have the text positioned at the bottom instead of the top of a page. Here is a link: http://www.jcstrategies.com/jeff/featured_listings.php CSS CODE ----------------------------------------------------------- /***********************************************/ /* emx_nav_left.css */ /* Use with template Halo_leftNav.html */ /***********************************************/ /***********************************************/ /* HTML tag styles */ /***********************************************/ body{ font-family: Arial,sans-serif; color: #333333; line-height: 1.166; margin: 0px; padding: 0px; background: #cccccc url(./images/bg_grad.jpg) fixed; } /******* hyperlink and anchor tag styles *******/ a:link, a:visited{ color: #005FA9; text-decoration: none; } a:hover{ text-decoration: underline; } /************** header tag styles **************/ h1{ font: bold 120% Arial,sans-serif; color: #334d55; margin: 0px; padding: 0px; } h2{ font: bold 114% Arial,sans-serif; color: #006699; margin: 0px; padding: 0px; } h3{ font: bold 100% Arial,sans-serif; color: #334d55; margin: 0px; padding: 0px; } h4{ font: 100% Arial,sans-serif; color: #333333; margin: 0px; padding: 0px; } h5{ font: 100% Arial,sans-serif; color: #334d55; margin: 0px; padding: 0px; } /*************** list tag styles ***************/ ul{ list-style-type: square; } ul ul{ list-style-type: disc; } ul ul ul{ list-style-type: none; } /********* form and related tag styles *********/ form { margin: 0; padding: 0; } label{ font: bold 1em Arial,sans-serif; color: #334d55; } input{ font-family: Arial,sans-serif; } /***********************************************/ /* Layout Divs */ /***********************************************/ #pagecell1{ position:absolute; top: 112px; left: 2%; right: 2%; width:95.6%; background-color: #ffffff; } #tl { position:absolute; top: -1px; left: -1px; margin: 0px; padding: 0px; z-index: 100; } #tr { position:absolute; top: -1px; right: -1px; margin: 0px; padding: 0px; z-index: 100; } #masthead{ position: absolute; top: 0px; left: 2%; right: 2%; width:95.6%; } #pageNav{ float: left; width:178px; padding: 0px; background-color: #F5f7f7; border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc; font: small Verdana,sans-serif; } #content{ padding: 5px 10px 5px 5px; margin:0px 0px 0px 179px; border-left: 1px solid #ccd2d2; } /***********************************************/ /* Component Divs */ /***********************************************/ #siteName{ margin: 0px; padding: 16px 0px 8px 0px; color: #ffffff; font-weight: normal; } /************** utility styles *****************/ #utility{ font: 75% Verdana,sans-serif; position: absolute; top: 16px; right: 0px; color: #919999; } #utility a{ color: #ffffff; } #utility a:hover{ text-decoration: underline; } /************** pageName styles ****************/ #pageName{ padding: 0px 0px 14px 10px; margin: 0px; border-bottom:1px solid #ccd2d2; } #pageName h2{ font: bold 175% Arial,sans-serif; color: #000000; margin:0px; padding: 0px; } #pageName img{ position: absolute; top: 0px; right: 6px; padding: 0px; margin: 0px; } /************* globalNav styles ****************/ #globalNav{ position: relative; width: 100%; min-width: 640px; height: 32px; color: #cccccc; padding: 0px; margin: 0px; background-image: url(./images/glbnav_background.gif); } #globalNav img{ margin-bottom: -4px; } #gnl { position: absolute; top: 0px; left:0px; } #gnr { position: absolute; top: 0px; right:0px; } #globalLink{ position: absolute; top: 6px; height: 22px; min-width: 640px; padding: 0px; margin: 0px; left: 10px; z-index: 100; } a.glink, a.glink:visited{ font-size: small; color: #000000; font-weight: bold; margin: 0px; padding: 2px 5px 4px 5px; border-right: 1px solid #8FB8BC; } a.glink:hover{ background-image: url(./images/glblnav_selected.gif); text-decoration: none; } .skipLinks {display: none;} /************ subglobalNav styles **************/ .subglobalNav{ position: absolute; top: 84px; left: 0px; /*width: 100%;*/ min-width: 640px; height: 20px; padding: 0px 0px 0px 10px; visibility: hidden; color: #ffffff; } .subglobalNav a:link, .subglobalNav a:visited { font-size: 80%; color: #ffffff; } .subglobalNav a:hover{ color: #cccccc; } /*************** search styles *****************/ #search{ position: absolute; top: 5px; right: 10px; z-index: 101; } #search input{ font-size: 70%; margin: 0px 0px 0px 10px; } #search a:link, #search a:visited { font-size: 80%; font-weight: bold; } #search a:hover{ margin: 0px; } /************* breadCrumb styles ***************/ #breadCrumb{ padding: 5px 0px 5px 10px; font: small Verdana,sans-serif; color: #AAAAAA; } #breadCrumb a{ color: #AAAAAA; } #breadCrumb a:hover{ color: #005FA9; text-decoration: underline; } /************** feature styles *****************/ .feature{ padding: 0px 0px 10px 10px; font-size: 80%; min-height: 200px; height: 200px; } html>body .feature {height: auto;} .feature h3{ font: bold 175% Arial,sans-serif; color: #000000; padding: 30px 0px 5px 0px; } .feature img{ float: left; padding: 0px 10px 0px 0px; } /*************** story styles ******************/ .story { padding: 10px 0px 0px 10px; font-size: 80%; } .story h3{ font: bold 125% Arial,sans-serif; color: #000000; } .story p { padding: 0px 0px 10px 0px; } .story a.capsule{ font: bold 1em Arial,sans-serif; color: #005FA9; display:block; padding-bottom: 5px; } .story a.capsule:hover{ text-decoration: underline; } td.storyLeft{ padding-right: 12px; } /************** siteInfo styles ****************/ #siteInfo{ clear: both; border-top: 1px solid #cccccc; font-size: small; color: #cccccc; padding: 10px 10px 10px 10px; margin-top: 0px; } #siteInfo img{ padding: 4px 4px 4px 0px; vertical-align: middle; } /************ sectionLinks styles **************/ #sectionLinks{ margin: 0px; padding: 0px; } #sectionLinks h3{ padding: 10px 0px 2px 10px; border-bottom: 1px solid #cccccc; } #sectionLinks a:link, #sectionLinks a:visited { display: block; border-top: 1px solid #ffffff; border-bottom: 1px solid #cccccc; background-image: url(./images/bg_nav.jpg); font-weight: bold; padding: 3px 0px 3px 10px; color: #21536A; } #sectionLinks a:hover{ border-top: 1px solid #cccccc; background-color: #DDEEFF; background-image: none; font-weight: bold; text-decoration: none; } /************* relatedLinks styles **************/ .relatedLinks{ margin: 0px; padding: 0px 0px 10px 10px; border-bottom: 1px solid #cccccc; } .relatedLinks h3{ padding: 10px 0px 2px 0px; } .relatedLinks a{ display: block; } /************* relatedLinks2 styles **************/ .relatedLinks2{ margin: 0px; padding: 10px 0px 10px 1px; border-bottom: 1px solid #cccccc; } .relatedLinks h3{ padding: 10px 0px 2px 0px; } .relatedLinks a{ display: block; } /**************** advert styles *****************/ #advert{ padding: 10px; } #advert img{ display: block; } /********************* end **********************/ ANY IDEAS???? I have tried firefox and IE, lastest versions and all works ok, but in Safari the top left and top right of the rounded purple border is not rounded like the other radius borders on the page which show correctly. The attached image is what the left and right rounded purple border looks like, but can not figure out why it shows ok in Firefox but not Safari. Can anyone see where I might be going wrong in trying to get this to work like other browsers show it ? Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"><!--
body { border: 0em solid #000; background-color: #ddd; height: 100%; }
div { padding: 0em; margin: 0em; }
div.bodyContainer, div.header, div.footer { width: 60em; }
div.header { text-align: center; }
div.bodyContainer { text-align: center; margin: 0 auto; }
div.left, div.right { width: 10em; border-bottom: 0.0625em dashed #CF8DEB;}
div.middle { width: 40em; margin: 0 auto; padding-left: 0.41em; border-bottom: 0.0625em dashed #CF8DEB;}
div.footer { text-align: center; }
div.bodyContainer, div.outer, div.left, div.right { background-color: #56D1AC; /* green */ }
div.bodyContainer, div.header, div.middle { border-top-left-radius: 1.125em; border-top-right-radius: 1.125em; }
div.outer { display: block; }
div.left, div.middle, div.right { display: table-cell; }
div.middle { border-top: 0.3em solid purple; border-right: 0.6em solid purple; border-left: 0.6em solid purple; }
div.bodyContainer { /*background-color: pink;*/ }
div.middle { background-color: lightblue; }
div.footer { background-color: #ddd; }
.clearfloat { clear: both; }
.menu { background: #6384DE; margin: 0em; text-align: center; font-size: 0.965em; font-family: Broadway; border: 0em solid #EDB6B6; padding: 0.5em 0em 0.313em 0em; border-top-left-radius: 1.125em; border-top-right-radius: 1.125em; } /* 3F65CC */
--></style>
</head>
<body onload="disableUpdateSubmit();">
<div class="bodyContainer">
<div class="header">
<!-- menu start -->
<div class="menu"></div>
<div class="clearfloat"></div>
<!-- menu end -->
</div>
<div class="outer">
<div class="left"><br></div>
<div class="middle"><br>middle</div>
<!-- middle end -->
<div class="right">
<!-- start of specials -->
<div class="specials">SPECIAL OFFERS</div>
<!-- end of specials -->
<br class="clearfloat">
</div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
I am an art student, and I'm trying to construct my own portfolio site. I am, however, new to CSS, so I dont really know what I'm doing. I'm using Dreamweaver CS3. I'm using a fixed 2 column template, with header and footer, and the left column as the side bar. Within the right column, I'm trying to make a scrollbar hovering near the top of the div, with clickable thumbnails of my work. Once the thumbnails are clicked on, a larger version of the image takes up the rest of the column. Does anyone have any idea how to accomplsh this? Even my web design teacher's stumped with this one. I thought about using frames, but thats html... |
|||||||