CSS border-bottom curved edges in Safari

If you check out the menu at http://www.demomix.se/Demomix.se/Demomix.se.html in Safari you will see that the red border-bottom line on hover is curved at each side.
This isn't the case in IE or FF where the line is straight, as I want it to be.
So how do I edit border-bottom CSS code to make a straight line without the strange curves on the sides?
/Erik

Hi Erik,
No problems. Can you post what the address of the site is now? I just tried http://www.demomix.se/Demomix.se/Demomix.se.html and .Mac is returning that no site exists there.
By offset, I meant to replace the padding-left: 15px with a margin-left: 15px. As you've noticed there is no attribute relating to 'offset'
Could you also post a picture of how you want the hover to be handled as that will help me make sure I'm giving you the right advice

Similar Messages

[css] border bottom

Utilizo el siguiente código:
border-bottom-width: 3px;
o bien,
border-bottom: 3px;
me hace un grueso de 3 pixeles como especifíco en la
linea inferior de la
capa pero curiosamente en Motzilla no llega la anchura a ser
el 100% de esta
capa cosa ke en Explorer me lo hace perfectamente.
Que más debo especificar para que el ancho de la linea
inferior sea el 100%
del ancho de la capa?
Gracias

Se puede ver en alguna url, Markus?
Andres Cayon
http://www.esmmug.com
"Markus" <[email protected]_no_spam> escribió
en el mensaje
news:ef0irh$7ib$[email protected]..
> Nada me sigue sucediendo lo miso... :-S
>
>
> "Andres Cayon" <[email protected]>
escribió en el mensaje
> news:ef0chr$3t$[email protected]..
>> Hola Markus:
>> Has probado definiendo explicitamente los anchos de
los lados a cero?
>>
>>
border-left,border-right,margin-left,margin-right{0px}
>>
>> --
>> Andres Cayon
>>
http://www.dwug.es
>> ---------------------------------------
>> "Markus" <[email protected]_no_spam>
escribió en el mensaje
>> news:eeu4ju$3b3$[email protected]..
>>> Utilizo el siguiente código:
>>>
>>> border-bottom-width: 3px;
>>> o bien,
>>> border-bottom: 3px;
>>>
>>> me hace un grueso de 3 pixeles como
especifíco en la linea inferior de
>>> la capa pero curiosamente en Motzilla no llega
la anchura a ser el 100%
>>> de esta capa cosa ke en Explorer me lo hace
perfectamente.
>>>
>>> Que más debo especificar para que el ancho
de la linea inferior sea el
>>> 100% del ancho de la capa?
>>>
>>> Gracias
>>>
>>
>>
>
>

CreateChildSymbol on the top left bottom right edges of the window/stage?

I am creating a particle system and I am trying to generate the particles / CreateChildSymbol on the top left bottom right edges of the window/stage?
Currently I am generating random X & Y points but thats not really doing what I need.
// find the stage width & height
sym.maxWidth = $('#Stage').width();
sym.maxHeight = $('#Stage').height();
// randomize the numbers 1-12
var randomSymbol = Math.floor((Math.random()*12)+1);
// Pull symbol from lib and add to stage
sym.mainParticle = sym.createChildSymbol("symbol_ani_" + randomSymbol, "Stage");
// create jQuery object / Edge Ani element var
sym.mainParticleElement = sym.mainParticle.getSymbolElement();
// randomize the stage X & Y coords
var randomX = Math.floor(Math.random() * sym.maxWidth);
var randomY = Math.floor(Math.random() * sym.maxHeight);
// position based on random stage X + Y position
sym.mainParticleElement.css({'position':'absolute','top':randomY+'px','left':randomX+'px'} );
But I am at a loss of how to randomize the top / right / bottom / left X & Y edges of the stage

Got it working!
Well to be honest another friend helped me work out the logic for randomizing the sides (top, left, bottom, right) to get it working.
But I wanted to share since I had a hard time finding anything releated to this topic. Big Ups to Resdesign + Tim Jaramillo for helping me with some logic along the way as well!
// these variables are global within compReady would need to change to sym. instead of var if needed outside of this
var moveToX = $(window).width()/2,
     moveToY = $(window).height()/2;
function spawnParticle() {
     // these variables are only availabe inside this function
     var side = Math.floor(Math.random() * 4),
         offScreen = 100,    // how many pixels off the side of the screen to start
         yRand = Math.floor(Math.random() * $(window).height()),
         xRand = Math.floor(Math.random() * $(window).width()),
         xPos = 0,
         yPos = 0;
     switch (side) {
         case 0:
             xPos = xRand;
             yPos = -offScreen;
             console.log('spawn from top');
         break;
         case 1:
             console.log('spawn from right');
             xPos = $(window).width() + offScreen;
             yPos = yRand;
         break;
         case 2:
             console.log('spawn from bottom');
             xPos = xRand;
             yPos = $(window).height() + offScreen;
         break;
         case 3:
             xPos = -offScreen;
             yPos = yRand;
             console.log('spawn from left');
         break;
     // add to the stage
     sym.mainParticle = sym.createChildSymbol("star", "Stage");
     sym.mainParticleElement = sym.mainParticle.getSymbolElement();
     sym.mainParticleElement.css({'position':'absolute','top':yPos+'px','left':xPos+'px'});
     // simple animation to reveal the particle
     sym.mainParticleElement.animate({ left: moveToX, top: moveToY }, 1000, function() {
         // for this test, I'm removing the particle after it has finished animating
         $(this).fadeOut(function() {
             $(this).remove();
// keep spanwing new particles
setInterval(spawnParticle, 500);

Styling TabPane header area / fx-border-bottom-color

Hi,
I want to style the TabPane to my needs.
Especially I want to replace the ugly gray background in the header area, which is defined in caspian.css as:
.tab-pane *.tab-header-background {
    -fx-background-color: -fx-outer-border, -fx-inner-border, derive(-fx-color, -20%);
    -fx-effect: innershadow(two-pass-box , rgba(0,0,0,0.6) , 4, 0.0 , 0 , 0);
}If I remove the background, the "border" is also removed (it is mimiced by the shadow I think).
.tab-pane *.tab-header-background {
    -fx-background-color: null;
    -fx-effect: innershadow(two-pass-box , rgba(0,0,0,0.6) , 4, 0.0 , 0 , 0);
}I only want a border at the bottom of the background. But this has no effect:
.tab-pane *.tab-header-background {
    -fx-background-color: null;
    -fx-border-bottom-color: red;
}It seems JavaFX does not support -fx-border-bottom-color (although it is CSS 3).
How can I do it?

There is much of CSS 3 that JavaFX doesn't currently support, and border-bottom-color is one of them. But the shorthand works.
    -fx-border-color: transparent transparent red transparent;

How to make an applet with curved edges in the browser

Hi all,
I m doing an applet application in which i want to show an image inside a player in the website. The edges of the player is designed in curved shape. So i too wanted to do an applet with curved edges. Otherwise my applet and the images are coming out of the player... do any body have come across such a problem. please give me some suggestions. Awaiting for your suggestions and solutions. If u don't understand what i m trying to say let me know..
Thanks...

I tried to get the screen height -1 and subtract from
all the ys in my applet but it doesnt work all the
time. I am drawing shapes and stuff with an algorithm
I wrote for class.
is there a way to get origin(0,0) to the lower left
screen easily.
thanksThe only way I can think of would be write a method to convert a "normal" y coord to an applet y coord. That would probably end up being a huge pain in the ass, since you would have to pass all y coords through it before using them, so I suggest you just get used to y being upside down.

Tabbed Panels border-bottom color problem

Small problem. Page has black backround, and to match it, the border-bottom is set to black on the active tab. Trouble is that this breaks up the outline on the vertical left side in FF and Chrome (but strangely, not in IE).
Any solution?

Name of the site is in the graphic above.
I have now seen that this small (1 pixel) gap exists in all implementations of the Spry Tabbed Panels.
Check yourself (you will need to use Ctrl+"+" to magify the screen to see it).
It seems to be an unavoidable bug that is usually hidden by colors that are not too contrasty.
Oh well, seems I have to accept this minor flaw and move on?

My spotlight search on mac lost its curved edges

My spotlight search on mac lost its curved edges
Hello, I was using my spotlight search and now i noticed that its edges are not curved anymore. Now they are straight. I don't like them: i like them like they used to be, curved.
What could I do?
Things i did that evidently did not work:
- Restart my mac
- Safely boot my mac
- change the color of the ui to dark and black to normal
my mac: MacBook Pro (Retina, 13-inch, Mid 2014)
               Processor: 3 GHz Intel Core i7
               Memory: 16 GB 1600 MHz DDR3
               Graphcs:

HI,
Does anything here sound familiar?
http://support.apple.com/kb/HT2538
Run the Apple Hardware Test. http://support.apple.com/kb/HT1883
Carolyn

Does CSS Border Work with tr:hover?

I'm trying to apply a CSS border to a tr tag on mouse hover
by implementing
the code below. But it doesn't seem to be working. Changing
the background
on hover works, but not border. Anyone know why this isn't
working?
#TableTest tr:hover {
border: 1px solid #000000;
Brandon

.oO(Brandon)
>I'm trying to apply a CSS border to a tr tag on mouse
hover by implementing
>the code below. But it doesn't seem to be working.
Changing the background
>on hover works, but not border. Anyone know why this
isn't working?
>
>#TableTest tr:hover {
> border: 1px solid #000000;
>}
Rows don't have a border. Try to apply it to the table cells
instead:
#TableTest tr:hover td {
Remember that this won't work in IE 6.
Micha

Mac :: Firefox :: CSS border issue

Can someone with Firefox on a Mac check this page and see if
you can tell
why in the "products" boxes ( there are 3 ) .. the bottom
border is missing
on only 2 of them. I believe the 3rd box down renders the
border. If I
delete a paragraph from the 1st box, the border shows on the
1st box and not
the other two .. weird.
http://65.115.104.39/html%5Fnewsletters/stevens/urban/
The css is fairly complex for the entire page but the
relevant code for this
product box looks like this.....
#pContent .adblock {
border: 1px dashed #777;
margin: 1em 10px;
background: #fff;
}There is more going on there but the .adblock style is this
container with
the dashed border. Seems to work fine in Safari, and IE and
FF on PC.
Regards,
..Trent Pastrana
www.fourlevel.com

oops, had an extra border in there.
#outerwrap #wrap #pContent hr {
position: relative;
height:0;
border-top:1px solid #777;
Regards,
..Trent Pastrana
www.fourlevel.com
"T.Pastrana - 4Level" <[email protected]> wrote in message
news:e99fee$7lu$[email protected]..
> No, it's actually not the hr causing the missing border.
It was doing
> that before the hr was there. The hr was causing the
redraw problem
> though. Firefox also doesn't render height on hrs very
well. The way
> around both of these problems was to set the height of
the hr to 0px and
> give it a top border.
>
>
> #outerwrap #wrap #pContent hr {
> position: relative;
> height:0;
> border:0;
> border-top:1px solid #777;
> }
>
>
> --
> Regards,
> ..Trent Pastrana
> www.fourlevel.com
>
>
>
>
>
> "Osgood" <[email protected]> wrote in
message
> news:e98c42$oog$[email protected]..
>> Osgood wrote:
>>
>>> T.Pastrana - 4Level wrote:
>>>
>>>> Really? ok thanks for checking...
>>>>
>>>>
>>> Yeah...but now I check in the latest version of
Firefox they don't
>>> appear. Have you got any empty clearing
<divs> in the code.
>>>
>>> If so put a in and see it that helps.
I seem to remember that the
>>> latest version of Firefox reacts differently to
empty <div></div> on
>>> Mac.
>>
>> This is what is causing those bottom dashed lines to
not appear in Mac
>> Firefox.
>>
>> <hr width="90%" size="1">
>>
>
>

CS4 Text around a bottom curve but text straight up and down?

I have to change the names on bottles that were shot and so I am trying to type the names. 1st I tried Photoshop and could not get the 3D to work and could not get the arc or the warp to work correctly.
So I went over to Illustrator. I finally got it figured out how to get the text on the bottom of the curve and reading corectly... BUT... the text on the R side of the curve, curves into the curve instead of each letter staying straight up and down horizontally. Help please? Nothing like being short on time and having to figure out how to get the text on a curve with the letters staying straight up and down instead of curving into the curve. Thank you!!!

OK. I did that but now I am trying to copy paste into my Photoshop file but when it comes out of Illustrator... It brings an odd white box that is really messing me up!!! Why won't it let me just copy the text? Why is Illustrator making an extra white box that is blocking my image? Thanks. See the 2 below. 1 is the bottle before I have gotten the name over and the other, is the bottle when I am trying to paste just the text in place. For some reason, Illustrator is adding a white box that is messing me up? 1 is how it should look. 2 is Illustrator is making an extra white box that is covering up most of my bottle.

CSS for links display differently in Safari and Firefox

Hello all,
I am having some link display problems. The CSS code for my link display is as follows:
#sidebar_1 a{
text-decoration: none;
font-weight: bold;
#sidebar_1 a:link{
color: #CCC;
#sidebar_1 a:visited{
color: #000;
#sidebar_1 a:hover, #sidebar_1 a:active, #sidebar_1 a:focus{
color: #000;
Unfortunately, the website is not live yet so I can't direct you to it.
What happens: in Firefox, mousing over a link causes it to go black; but when the link is clicked and the new page has loaded, the link goes back to being gray even though the linked page is active. However, in Safari the links for visited pages stay black. Any ideas on why this is happening?
Thanks in advance for all your help.

#sidebar_1 a:vistied {
color:#000;
is stating that all visited links in the #sidebar_1 div to be black. Are you saying that all visited links are black, outside the sidebar_1 div?
Jim

Css bad in photo galleries with Safari 4

I have a photo gallery addded to iWeb '08 that looks fine on my Mac with Tiger and Safari 3 and firefox...
But on my other Mac with Leopard and Safari 4 the gallery nav buttons are all messed up and blue... I think that the css file for it is not being found with this setup.
I tried adding full pathnames to the css in the page but that didn't work (if I did it everywhere it need it)...
Does anyone else have his problem or a clue??
Thanks!!

Over the last couple of days, Safari 4 has gone haywire on me a few times.
Last night it totally scrambled the Apple home page and then started to tell me that every page I tried was not available.
I wish I had taken a screenshot of the Apple page as I have never seen anything as messed up as this!
I had to reset, quit and relaunch four times in about 15 minutes.
In general, I am pleased with it - when it works!

How do I gesture to scroll to top or bottom of page in safari?

On my Macbook Pro using Safari, the three finger swipe left or right takes me to the previous or next page in history.
How do I gesture to take me to the top or bottom of the page? BTW it works in FF. Whenever I decide to give Safari another try I find I really miss this.
Thanks!
Alex

Hi Alex,
You could use two fingers and set scrolling speed to Fast

CP2025DN printing Magenta Border on outer edges of Paper.

I have a CP2025 DN that has worked fairly good for a while now, but recently I've started having a pale magenta (pink) looking border printing up/down the outer edges of the paper. In the recent few weeks it has consistently gotten darker it seems. It will appear on the edges even if you use the black only print option with black text only on the page. I have run it through several cleanings, and also several calibrations with no luck. I have also open all trays, and both front and back doors and cleaned every piece as good as possible, once again with no luck.
Anyone else had this problem? If so, how did you get it fixed? Anyone from HP able to point me in the right direction?
HELP!!! We need our Documents to look good, thats why we bought this printer.
Thanks in Advance.

I had the same problem with a yellow stripe, only solution wes to replace the yellow toner
W

CSS Border Throws Off Page design In DW

Hi,
following my earlier posting, the problem I've been having
seems to stem from my CSS sheet. I'm just trying to apply a plain
white 1px border to a table which I've already created (and
populated), but when I do so the design goes badly awry in DW and
some cells get much larger than they're meant to be. However when I
view the page in IE it looks just fine. Here's the CSS code
.contenttableborder {
border: 1px solid #FFFFFF;
Can't get much simpler. Does anyone have any idea what might
be causing this ?
Cheers
Simon

That's the way that tables work though, whatever is in that
cell will
determine the width of that cell, place any padding or
margins you add to it
via a stylesheet. You shouldn't really specify a cell width -
let it be
determined by the content.
By the way, I would remove that bg color from the html and
add it to your
table class, that way you will have the same background color
in all
browsers.
PS: Another tip - don't work in layout mode - get into
design/code view.
It's too easy to get into bad coding practices using layout
mode. Have a
read - you may find this of interest:
http://apptools.com/rants/spans.php
Nadia
Adobe� Community Expert : Dreamweaver
http://www.csstemplates.com.au
- CSS Templates | Free Templates
http://www.DreamweaverResources.com
- Dropdown Menu Templates|Tutorials
http://www.macromedia.com/devnet/dreamweaver/css.html
- CSS Tutorials
"roonaldo_efc" <[email protected]> wrote in
message
news:e2pk0a$nbb$[email protected]..
> it isnt throwing it at all in the browse, Nadia, it's
just that everything
> jumps way over in D/W - a 190 px cell displays as 214
but then shows up ok
> in
> IE.
>
> Guess I'm juat kinda flummoxed
>
> Cheers
>
> Simon
>

CSS border-bottom curved edges in Safari

Similar Messages

Maybe you are looking for