Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > CSS > CSS Cascading Style Sheets
Password Reminder
Register
| FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
CSS Cascading Style Sheets All issues relating to Cascading Style Sheets (CSS).
Welcome to the p2p.wrox.com Forums.

You are currently viewing the CSS Cascading Style Sheets section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old December 4th, 2006, 07:29 AM
Registered User
 
Join Date: Dec 2006
Location: , , United Kingdom.
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Default rounded corners

I recently purchased Pro css for web designers. This book is great and I have learned a lot of helpful tips. I am now trying to create round corners on a box. I am copying the code straight out the book including the hacks but I am not achieving the right results. the images appear very wide and the box is four times longer then it should be in fire fox and there is no change what so ever in IE.

Here is the xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.W3.org/TR/xhtml1/DTD/xhtml1-transtional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>roundbox</title>
<link rel="stylesheet" type="text/css" href="boxfw.css" />
</head>
<body>
<div id="sidebar">
<div class="box">
<h2>box12334566</h2>
<p>first sentence for the lovely box thats round
</p>
<p>
the second box well not the box but the sentece because i am trying to set up a box you know what i mean.</p>
<p>the thrid sentence very importantm one thinks because the first div comes after it
...........................................
yeeeeeeeeeeeeeeeeeeeee</p>
</div>
</div>
</body>
</html>

and here is the css
#sidebar {
width: 200px;
}

.box {
background-color: #f5ece3;
border: 2px solid #eld4c0;
padding: 8px;
}

.box:before {
content: url(box-top.gif);
display: block;
line-height: 0.1;
margin: -10px -10px -22px -10px;
}

.box:after {
clear: both;
content: url(box-btm.gif);
display: block;
line-height: 0.1;
margin: 0px -10px -10px -10px;
}

/*.box h2 {
background: transparent url(box-top.gif) no-repeat top left;
margin: -10px -10px 0 10px;*/
}

.box > h2 {
background-image: none;
margin-top: 0; 0 auto 0;
padding: 0;
}

thanks for looking and advice would be helpful.
Reply With Quote
  #2 (permalink)  
Old January 30th, 2007, 01:16 AM
Registered User
 
Join Date: Jan 2007
Location: , , .
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Default

I am having some problems with the code in the book as well.

I did notice a couple of things in your code.

I did not have this commented out.
/*.box h2 {
background: transparent url(box-top.gif) no-repeat top left;
margin: -10px -10px 0 10px;*/
}

you have an extra semi colon on the margin-top property after the first 0

.box > h2 {
background-image: none;
margin-top: 0; 0 auto 0;
padding: 0;
}

here is the way I translted the code:

/* styles for rounded corner fixed width box */
#sidebar
{
    width: 200px;
}
.box
{
    background-color: #f5ece3;
    border: 2px solid #eld4c0;
    padding: 8px;
}
.box:before
{
    content: url(box-top.gif);
    display: block;
    line-height: 0.1;
    margin: 0 -10px -10px -10px;
}
.box:after
{
    clear: both;
    content: url(box-btm.gif);
    display: block;
    line-height: 0.1;
    margin: 0 -10px -10px -10px;
}
.box h2
{
    margin-top: 0;
}
/* added for explorer */
.box h2
{
    background: transparent url(box-top.gif) no-repeat top left;
    margin: -10px -10px auto -10px;
    padding: 10px 10px 0 10px;
}
/* sets the h2 back from explorer hack using child selector > */
.box > h2
{
    background-image: none;
    margin: 0 0 auto 0;
    padding: 0;
}


if you get it working let me know, I tried in IE and it doesn't work


Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
how to make image bix edges rounded seco Dreamweaver (all versions) 0 April 9th, 2007 05:30 PM
<b> tag for getting a rounded corner table? Cyber Shiva HTML Code Clinic 1 March 13th, 2007 05:23 AM
Rounded VB forms??? Lost_Found VB How-To 4 June 26th, 2004 01:05 AM
decimal values is rounded hosefo81 PHP Databases 2 December 9th, 2003 01:50 AM



All times are GMT -4. The time now is 02:08 PM.


Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.