View unanswered posts | View active topics It is currently Sat Jan 18, 2020 6:26 pm

Reply to topic  [ 4 posts ] 
 Border Corners Crossing Over? 
Author Message

Joined: Thu Jul 15, 2010 8:12 am
Posts: 6
Post Border Corners Crossing Over?

Quickly: You can see an example of the problem here:

You'll notice that every corner (except for the one being rounded) appears to be overlapping.

Anyone know why this might be? I'm using PIE on the main containing DIV as well as a form button within it so would using it twice within an element already using it cause a problem?

The HTML is as follows...

<div id="home-find">
                    <h2>Find an Offer</h2>
                        <p><strong>Your online Bar &amp; Club portal.</strong> Search for special offers at Clubs &amp; Bars in your area.</p>
                        <p><button type="submit">Go</button></p>
                        <p class="town">
                                <option>Select a Town</option>
                                <option>Select a Venue  Type</option>
                                <option>Select a Venue</option>
                                <option>Show All</option>

...and the CSS is...

{ -moz-border-radius:0 0 40px 0; -webkit-border-radius:0 0 40px 0; border-radius:0 0 40px 0; background:url(../Images/navigation.png) left top repeat-x #000; border:3px solid #FFF; margin-bottom:20px; behavior:url(/LL/Assets/Styles/PIE.php); position:relative; width:564px; }

#home-find form
{ background:url(../Images/home-find-logo.png) 17px 10px no-repeat; color:#FFF; padding:15px 20px 0 220px; }

#home-find p:first-child
{ font-size:120%; }

#home-find strong
{ display:block; font-size:130%; }

#home-find h2
{ background:url(../Images/header-pink.png) left top repeat-x #EC008C; color:#FFF; font-size:135%; padding:6px 12px 4px; width:50%; }

#home-find select
{ margin-bottom:1em; width:150px; }

#home-find .town
{ margin-top:2em; }

#home-find button
{ -moz-border-radius:8px; -webkit-border-radius:8px; background:url(../Images/button-go.png) left top repeat-x #EE3696; border:0; border-radius:8px; color:#FFF; cursor:pointer; float:right; font-size:140%; margin-top:10px; padding:4px 0 5px; width:85px; behavior:url(/LL/Assets/Styles/PIE.php); bottom:20px; position:absolute; right:20px; }

Any help appreciated.



Fri Jul 16, 2010 2:09 am

Joined: Thu Jul 15, 2010 8:12 am
Posts: 6
Post Re: Border Corners Crossing Over?
Also, just noticed another bug/issue...

A strange horizontal bar appears in the background of the DIV(s) that has PIE applied to it.

See example here: (notice the bottom part of the image shows what the box looks like without PIE and the top half shows what happens after PIE is applied - a light grey horizontal bar appears just under the pink header?)

This is along with the dodgy corner overlaps (as per my post above).

Any help greatly appreciated.

Kind regards,

Fri Jul 16, 2010 3:32 am

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1452
Post Re: Border Corners Crossing Over?
Thanks very much for reporting these issues.

The first issue (overlapping corners) looks to be a variant of a logged bug:

I don't know of a current workaround, unfortunately you'll have to wait until this is fixed (hopefully beta2)

For the second issue... I can't reproduce the issue with the code snippets you pasted in, I'm guessing you added PIE w/gradient to the h2. Can you paste in that code please? My hunch is it's an issue with hasLayout, but I'd like to have the testcase to be sure and hopefully help you find a workaround.

Fri Jul 16, 2010 7:31 am

Joined: Thu Jul 15, 2010 8:12 am
Posts: 6
Post Re: Border Corners Crossing Over?
Hi Jason,

Really sorry for the late reply, I've been on holiday for the past week!

No there is no PIE gradient applied actually.

It's exactly as per the CSS provided.

So the gradient set on the main DIV "home-find" is a background image "../Images/navigation.png".

Any help you could give would be great.

The first issue I've managed to partially sort out by shrinking the left/right/bottom borders from 3px to 2px and then setting the top border to 1px. I now just need to work out how I can apply a border to the top of the box which is 2px thick? Might have to get creative with background colours/image positioning?

But definitely need to work out that odd horizontal line!

Kind regards,

Wed Jul 28, 2010 6:31 am
Display posts from previous:  Sort by  
Reply to topic   [ 4 posts ] 

Who is online

Users browsing this forum: No registered users and 2 guests

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.