Border clipped off in Chrome but not IE or Edge

-1

This CSS & HTML shows three text boxes that are completely wrapped in their borders when viewed in IE and Edge. When viewed in Chrome (or on my Android's browser) the right side of the border is clipped off.

I can make it work by adding a trailing " " to each span, but I'd rather learn whether I'm doing something wrong...

<html>

<body>

<style>

.link-bubble {

    float:none;

    white-space:nowrap;

    border: thin solid blue;

    border-radius:10px;

    background-color:antiquewhite;

    padding:4px 6px 6px 6px;

    margin:2px;

}

</style>

<div style="float:right; width:30%; text-align:center; line-height:40px;">

    <span class="link-bubble">

        <a href="/Services/target1">First service offered</a>

    </span>

    <span class="link-bubble">

        <a href="/Services/target2">Second service offered</a>

    </span>

    <span class="link-bubble">

        <a href="/Services/target3">Third service offered</a>

    </span>

</div>

</body>

</html>

edited Dec 4 '18 at 15:02

TylerH

16.1k105569

asked Nov 28 '18 at 23:00

NHSnowSkier

Seems something to do with the width:30%; on the div.

– WolfieeifloW
Nov 28 '18 at 23:03

add a comment |

-1

I can make it work by adding a trailing " " to each span, but I'd rather learn whether I'm doing something wrong...

<html>

<body>

<style>

.link-bubble {

    float:none;

    white-space:nowrap;

    border: thin solid blue;

    border-radius:10px;

    background-color:antiquewhite;

    padding:4px 6px 6px 6px;

    margin:2px;

}

</style>

<div style="float:right; width:30%; text-align:center; line-height:40px;">

    <span class="link-bubble">

        <a href="/Services/target1">First service offered</a>

    </span>

    <span class="link-bubble">

        <a href="/Services/target2">Second service offered</a>

    </span>

    <span class="link-bubble">

        <a href="/Services/target3">Third service offered</a>

    </span>

</div>

</body>

</html>

edited Dec 4 '18 at 15:02

TylerH

16.1k105569

asked Nov 28 '18 at 23:00

NHSnowSkier

Seems something to do with the width:30%; on the div.

– WolfieeifloW
Nov 28 '18 at 23:03

add a comment |

-1

I can make it work by adding a trailing " " to each span, but I'd rather learn whether I'm doing something wrong...

<html>

<body>

<style>

.link-bubble {

    float:none;

    white-space:nowrap;

    border: thin solid blue;

    border-radius:10px;

    background-color:antiquewhite;

    padding:4px 6px 6px 6px;

    margin:2px;

}

</style>

<div style="float:right; width:30%; text-align:center; line-height:40px;">

    <span class="link-bubble">

        <a href="/Services/target1">First service offered</a>

    </span>

    <span class="link-bubble">

        <a href="/Services/target2">Second service offered</a>

    </span>

    <span class="link-bubble">

        <a href="/Services/target3">Third service offered</a>

    </span>

</div>

</body>

</html>

edited Dec 4 '18 at 15:02

TylerH

16.1k105569

asked Nov 28 '18 at 23:00

NHSnowSkier

I can make it work by adding a trailing " " to each span, but I'd rather learn whether I'm doing something wrong...

<html>

<body>

<style>

.link-bubble {

    float:none;

    white-space:nowrap;

    border: thin solid blue;

    border-radius:10px;

    background-color:antiquewhite;

    padding:4px 6px 6px 6px;

    margin:2px;

}

</style>

<div style="float:right; width:30%; text-align:center; line-height:40px;">

    <span class="link-bubble">

        <a href="/Services/target1">First service offered</a>

    </span>

    <span class="link-bubble">

        <a href="/Services/target2">Second service offered</a>

    </span>

    <span class="link-bubble">

        <a href="/Services/target3">Third service offered</a>

    </span>

</div>

</body>

</html>

<html>

<body>

<style>

.link-bubble {

    float:none;

    white-space:nowrap;

    border: thin solid blue;

    border-radius:10px;

    background-color:antiquewhite;

    padding:4px 6px 6px 6px;

    margin:2px;

}

</style>

<div style="float:right; width:30%; text-align:center; line-height:40px;">

    <span class="link-bubble">

        <a href="/Services/target1">First service offered</a>

    </span>

    <span class="link-bubble">

        <a href="/Services/target2">Second service offered</a>

    </span>

    <span class="link-bubble">

        <a href="/Services/target3">Third service offered</a>

    </span>

</div>

</body>

</html>

<html>

<body>

<style>

.link-bubble {

    float:none;

    white-space:nowrap;

    border: thin solid blue;

    border-radius:10px;

    background-color:antiquewhite;

    padding:4px 6px 6px 6px;

    margin:2px;

}

</style>

<div style="float:right; width:30%; text-align:center; line-height:40px;">

    <span class="link-bubble">

        <a href="/Services/target1">First service offered</a>

    </span>

    <span class="link-bubble">

        <a href="/Services/target2">Second service offered</a>

    </span>

    <span class="link-bubble">

        <a href="/Services/target3">Third service offered</a>

    </span>

</div>

</body>

</html>

html css google-chrome internet-explorer microsoft-edge

edited Dec 4 '18 at 15:02

TylerH

16.1k105569

asked Nov 28 '18 at 23:00

NHSnowSkier

edited Dec 4 '18 at 15:02

TylerH

16.1k105569

asked Nov 28 '18 at 23:00

NHSnowSkier

edited Dec 4 '18 at 15:02

TylerH

16.1k105569

edited Dec 4 '18 at 15:02

TylerH

16.1k105569

edited Dec 4 '18 at 15:02

TylerH

16.1k105569

asked Nov 28 '18 at 23:00

NHSnowSkier

asked Nov 28 '18 at 23:00

NHSnowSkier

asked Nov 28 '18 at 23:00

NHSnowSkier

Seems something to do with the width:30%; on the div.

– WolfieeifloW
Nov 28 '18 at 23:03

add a comment |

Seems something to do with the width:30%; on the div.

– WolfieeifloW
Nov 28 '18 at 23:03

Seems something to do with the width:30%; on the div.

– WolfieeifloW
Nov 28 '18 at 23:03

add a comment |

1 Answer
1

active

oldest

votes

I'm not 100% sure why that specific behavior is happening and the discrepancies between browsers, but I would bet it has to do with white-space:nowrap and the parent elements width: 30% and some quirkyness with that.

Instead of trying to work around that quirk, a much easier way to do this is change the display of the .link-bubble's from inline to block. You can do this with the display: block on the class, or just change the elements from span to div or other block elements. Here's some good reading on the box model - I'd also recommend reading up on css flexbox and grid, much easier and more modern way of handling positioning of elements vs divs and floats.

Also, If you really need the white-space: nowrap, add that style to the inner element. See my example below.

<html>

<body>

<style>

.link-bubble {

overflow: hidden;

border: thin solid blue;

border-radius:10px;

background-color:antiquewhite;

padding:4px 6px 6px 6px;

display: block;

margin: 2px;

}



.link-bubble a { white-space: nowrap; }

</style>

<div style="float:right; text-align:center; width: 30%; line-height: 40px;">

    <span class="link-bubble">

        <a href="/Services/target1">First service offered</a>

    </span>

    <span class="link-bubble">

        <a href="/Services/target2">Second service offered</a>

    </span>

    <span class="link-bubble">

        <a href="/Services/target3">Third service offered</a>

    </span>

</div>

</body>

</html>

edited Nov 28 '18 at 23:19

answered Nov 28 '18 at 23:04

tim

1,2751014

Thank you for your response. Client wants a collection of links on the right side of the page that are are basically "corralled". Each link can be a different size, can't be split in half (hence white-space:nowrap;) so the first line may hold 5 links, the second line 2, the third line 4, and all that would change as the client re-sizes the window. display:block; forces a fixed width column as wide as the widest text - so that's out. I had never used flexbox before - thanks for the tip - I definitely will be using it in the future but in this case it also would force fixed-width columns.

– NHSnowSkier
Nov 29 '18 at 14:28

No problem - if you found the answer useful, could you mark it as accepted to close this out?

– tim
Nov 29 '18 at 20:44

For now I'd like to see if anyone else can explain why that is happening and what I can do to make it work as (apparently) designed - without forcing block layout. I don't think I'm ready to close it out yet, but thank you again for your guidance.

– NHSnowSkier
Nov 30 '18 at 0:32

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53529390%2fborder-clipped-off-in-chrome-but-not-ie-or-edge%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

Also, If you really need the white-space: nowrap, add that style to the inner element. See my example below.

<html>

<body>

<style>

.link-bubble {

overflow: hidden;

border: thin solid blue;

border-radius:10px;

background-color:antiquewhite;

padding:4px 6px 6px 6px;

display: block;

margin: 2px;

}



.link-bubble a { white-space: nowrap; }

</style>

<div style="float:right; text-align:center; width: 30%; line-height: 40px;">

    <span class="link-bubble">

        <a href="/Services/target1">First service offered</a>

    </span>

    <span class="link-bubble">

        <a href="/Services/target2">Second service offered</a>

    </span>

    <span class="link-bubble">

        <a href="/Services/target3">Third service offered</a>

    </span>

</div>

</body>

</html>

edited Nov 28 '18 at 23:19

answered Nov 28 '18 at 23:04

tim

1,2751014

Thank you for your response. Client wants a collection of links on the right side of the page that are are basically "corralled". Each link can be a different size, can't be split in half (hence white-space:nowrap;) so the first line may hold 5 links, the second line 2, the third line 4, and all that would change as the client re-sizes the window. display:block; forces a fixed width column as wide as the widest text - so that's out. I had never used flexbox before - thanks for the tip - I definitely will be using it in the future but in this case it also would force fixed-width columns.

– NHSnowSkier
Nov 29 '18 at 14:28

No problem - if you found the answer useful, could you mark it as accepted to close this out?

– tim
Nov 29 '18 at 20:44

For now I'd like to see if anyone else can explain why that is happening and what I can do to make it work as (apparently) designed - without forcing block layout. I don't think I'm ready to close it out yet, but thank you again for your guidance.

– NHSnowSkier
Nov 30 '18 at 0:32

add a comment |

Also, If you really need the white-space: nowrap, add that style to the inner element. See my example below.

<html>

<body>

<style>

.link-bubble {

overflow: hidden;

border: thin solid blue;

border-radius:10px;

background-color:antiquewhite;

padding:4px 6px 6px 6px;

display: block;

margin: 2px;

}



.link-bubble a { white-space: nowrap; }

</style>

<div style="float:right; text-align:center; width: 30%; line-height: 40px;">

    <span class="link-bubble">

        <a href="/Services/target1">First service offered</a>

    </span>

    <span class="link-bubble">

        <a href="/Services/target2">Second service offered</a>

    </span>

    <span class="link-bubble">

        <a href="/Services/target3">Third service offered</a>

    </span>

</div>

</body>

</html>

edited Nov 28 '18 at 23:19

answered Nov 28 '18 at 23:04

tim

1,2751014

Thank you for your response. Client wants a collection of links on the right side of the page that are are basically "corralled". Each link can be a different size, can't be split in half (hence white-space:nowrap;) so the first line may hold 5 links, the second line 2, the third line 4, and all that would change as the client re-sizes the window. display:block; forces a fixed width column as wide as the widest text - so that's out. I had never used flexbox before - thanks for the tip - I definitely will be using it in the future but in this case it also would force fixed-width columns.

– NHSnowSkier
Nov 29 '18 at 14:28

No problem - if you found the answer useful, could you mark it as accepted to close this out?

– tim
Nov 29 '18 at 20:44

For now I'd like to see if anyone else can explain why that is happening and what I can do to make it work as (apparently) designed - without forcing block layout. I don't think I'm ready to close it out yet, but thank you again for your guidance.

– NHSnowSkier
Nov 30 '18 at 0:32

add a comment |

Also, If you really need the white-space: nowrap, add that style to the inner element. See my example below.

<html>

<body>

<style>

.link-bubble {

overflow: hidden;

border: thin solid blue;

border-radius:10px;

background-color:antiquewhite;

padding:4px 6px 6px 6px;

display: block;

margin: 2px;

}



.link-bubble a { white-space: nowrap; }

</style>

<div style="float:right; text-align:center; width: 30%; line-height: 40px;">

    <span class="link-bubble">

        <a href="/Services/target1">First service offered</a>

    </span>

    <span class="link-bubble">

        <a href="/Services/target2">Second service offered</a>

    </span>

    <span class="link-bubble">

        <a href="/Services/target3">Third service offered</a>

    </span>

</div>

</body>

</html>

edited Nov 28 '18 at 23:19

answered Nov 28 '18 at 23:04

tim

1,2751014

Also, If you really need the white-space: nowrap, add that style to the inner element. See my example below.

<html>

<body>

<style>

.link-bubble {

overflow: hidden;

border: thin solid blue;

border-radius:10px;

background-color:antiquewhite;

padding:4px 6px 6px 6px;

display: block;

margin: 2px;

}



.link-bubble a { white-space: nowrap; }

</style>

<div style="float:right; text-align:center; width: 30%; line-height: 40px;">

    <span class="link-bubble">

        <a href="/Services/target1">First service offered</a>

    </span>

    <span class="link-bubble">

        <a href="/Services/target2">Second service offered</a>

    </span>

    <span class="link-bubble">

        <a href="/Services/target3">Third service offered</a>

    </span>

</div>

</body>

</html>

<html>

<body>

<style>

.link-bubble {

overflow: hidden;

border: thin solid blue;

border-radius:10px;

background-color:antiquewhite;

padding:4px 6px 6px 6px;

display: block;

margin: 2px;

}



.link-bubble a { white-space: nowrap; }

</style>

<div style="float:right; text-align:center; width: 30%; line-height: 40px;">

    <span class="link-bubble">

        <a href="/Services/target1">First service offered</a>

    </span>

    <span class="link-bubble">

        <a href="/Services/target2">Second service offered</a>

    </span>

    <span class="link-bubble">

        <a href="/Services/target3">Third service offered</a>

    </span>

</div>

</body>

</html>

<html>

<body>

<style>

.link-bubble {

overflow: hidden;

border: thin solid blue;

border-radius:10px;

background-color:antiquewhite;

padding:4px 6px 6px 6px;

display: block;

margin: 2px;

}



.link-bubble a { white-space: nowrap; }

</style>

<div style="float:right; text-align:center; width: 30%; line-height: 40px;">

    <span class="link-bubble">

        <a href="/Services/target1">First service offered</a>

    </span>

    <span class="link-bubble">

        <a href="/Services/target2">Second service offered</a>

    </span>

    <span class="link-bubble">

        <a href="/Services/target3">Third service offered</a>

    </span>

</div>

</body>

</html>

edited Nov 28 '18 at 23:19

answered Nov 28 '18 at 23:04

tim

1,2751014

edited Nov 28 '18 at 23:19

answered Nov 28 '18 at 23:04

tim

1,2751014

answered Nov 28 '18 at 23:04

tim

1,2751014

answered Nov 28 '18 at 23:04

tim

1,2751014

Thank you for your response. Client wants a collection of links on the right side of the page that are are basically "corralled". Each link can be a different size, can't be split in half (hence white-space:nowrap;) so the first line may hold 5 links, the second line 2, the third line 4, and all that would change as the client re-sizes the window. display:block; forces a fixed width column as wide as the widest text - so that's out. I had never used flexbox before - thanks for the tip - I definitely will be using it in the future but in this case it also would force fixed-width columns.

– NHSnowSkier
Nov 29 '18 at 14:28

No problem - if you found the answer useful, could you mark it as accepted to close this out?

– tim
Nov 29 '18 at 20:44

For now I'd like to see if anyone else can explain why that is happening and what I can do to make it work as (apparently) designed - without forcing block layout. I don't think I'm ready to close it out yet, but thank you again for your guidance.

– NHSnowSkier
Nov 30 '18 at 0:32

add a comment |

Thank you for your response. Client wants a collection of links on the right side of the page that are are basically "corralled". Each link can be a different size, can't be split in half (hence white-space:nowrap;) so the first line may hold 5 links, the second line 2, the third line 4, and all that would change as the client re-sizes the window. display:block; forces a fixed width column as wide as the widest text - so that's out. I had never used flexbox before - thanks for the tip - I definitely will be using it in the future but in this case it also would force fixed-width columns.

– NHSnowSkier
Nov 29 '18 at 14:28

No problem - if you found the answer useful, could you mark it as accepted to close this out?

– tim
Nov 29 '18 at 20:44

For now I'd like to see if anyone else can explain why that is happening and what I can do to make it work as (apparently) designed - without forcing block layout. I don't think I'm ready to close it out yet, but thank you again for your guidance.

– NHSnowSkier
Nov 30 '18 at 0:32

Thank you for your response. Client wants a collection of links on the right side of the page that are are basically "corralled". Each link can be a different size, can't be split in half (hence white-space:nowrap;) so the first line may hold 5 links, the second line 2, the third line 4, and all that would change as the client re-sizes the window. display:block; forces a fixed width column as wide as the widest text - so that's out. I had never used flexbox before - thanks for the tip - I definitely will be using it in the future but in this case it also would force fixed-width columns.

– NHSnowSkier
Nov 29 '18 at 14:28

No problem - if you found the answer useful, could you mark it as accepted to close this out?

– tim
Nov 29 '18 at 20:44

For now I'd like to see if anyone else can explain why that is happening and what I can do to make it work as (apparently) designed - without forcing block layout. I don't think I'm ready to close it out yet, but thank you again for your guidance.

– NHSnowSkier
Nov 30 '18 at 0:32

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Btukfyl