/    Sign up×
Community /Pin to ProfileBookmark

CSS Border Style

Copy linkTweet thisAlerts:
Oct 29.2007

[code]#wrap2 {
border-left: 1px solid #e3e4e4;
border-right: 1px solid #e3e4e4;
background: #ffffff;
color: #404040;
margin: -10px 0 0 0;
width: 790px;
}[/code]

is the CSS style i am having an issue with, not the fact that there is something wrong with the CSS itself, but the graphic it is competing with.

The main picture on the site i am making has one rounded edge at the top, so using the border style is creating a little | at the top left of that image. Instead of redoing the graphic, is there a way to add padding to where the border starts at the top?

EG, the top left of the image has the curve that is 10px, the border needs to start after those 10px. (see picture as example)

[IMG]http://i3.photobucket.com/albums/y51/skilled1/example.jpg[/IMG]

so it would start 10px below where it would start by default

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebJoelOct 29.2007 — positioning the image by negative one-pixel (or a few pixels).

background-image:url() no-repeat -1px 0;

or [I]something like that[/I]. -You want the image to over-lie the border.

-Why do you require a border for this? Difficult to diagnose from 'images', but the image should 'be' the border *(or, [I]could[/I] be the border).

Would need to see actual code or URL to say more.. ?
Copy linkTweet thisAlerts:
@skilled1authorOct 30.2007 — you can view the site here

http://www.strata8.com

it is used to diferentiate between the whitespace of the center content area, and the background gradient
Copy linkTweet thisAlerts:
@CentauriOct 30.2007 — I notice you are pulling #wrap2 up by 10px with the negative top margin, and this is useful - instead of pulling the wrap up, pull the image up instead :[CODE]#wrap2 {
border-left: 1px solid #e3e4e4;
border-right: 1px solid #e3e4e4;
background: #ffffff;
color: #404040;
margin: [COLOR="Red"]0[/COLOR];
width: 790px;
}

#frontphoto {
margin: [COLOR="Red"]-10px[/COLOR] 0 10px;
border: 0;
}[/CODE]
Copy linkTweet thisAlerts:
@skilled1authorOct 30.2007 — @Centauri:

that fix works perfectly in Firefox, however it removes 10px from the top of the image in IE, yet to be tested in safari
Copy linkTweet thisAlerts:
@CentauriOct 30.2007 — A relative positioning will show the hidden bit in IE :[CODE]#frontphoto {
margin: -10px 0 10px;
border: 0;
[COLOR="Red"]position: relative;[/COLOR]
}[/CODE]
Copy linkTweet thisAlerts:
@skilled1authorOct 30.2007 — i got fed up with the coding that i had, i ended up just wrapping the photo in a new div, and decreasing the size of the content div by 2 pixels to accommodate the border.

thanks for all the help Centauri

updated / fixed site is located on my dev

http://basic5.com/dev/strata8/index.html
×

Success!

Help @skilled1 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...