Member Avatar for lyrico

Hi to all,

I am PHP developer and found many problems regarding cross browser issue.
Here's the problem:
I want a rounded div with shadow. My CSS codes works at FF but not in google chrome. Please help. Thanks in advance.


Here's my code:

<style type='text/css'>

.main{float:none;position:relative;width:980;background:white;height:500;margin:0px auto;top:10;}

#shadowBox
{
-moz-border-radius: 1em 0em 1em 0em;
border-radius: 1em 0em 1em 0em;

-moz-box-shadow: 3px 3px 3px 5px #bbb;
-webkit-box-shadow: 3px 3px 3px 5px #bbb;
box-shadow: 3px 3px 3px 5px #bbb;
}

</style>

<div class='main' id='ShadowBox'>

</div>
  • 2 Contributors
  • 3 Replies
  • 122 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Kraai

Dani AI

Generated

Two quick, concrete fixes that almost always solve Chrome/Firefox differences here.

First, make sure the selector actually matches the element you styled. The thread shows #shadowBox in CSS but the element is id="ShadowBox". Keep names identical (or use a class) — mismatch or inconsistent capitalization can cause a rule not to apply. Second, add units to numeric properties. Declarations like width:980 or top:10 are invalid (nonzero values need units) and will be ignored by some browsers.

Use DevTools to confirm whether the rules are applied: right‑click → Inspect Element → check the Styles pane. If a property is crossed out it will show why (invalid/overridden). Also check that no ancestor has overflow:hidden (which can clip shadows), that the element actually has nonzero layout (width/height set correctly), and that the page is in standards mode (valid DOCTYPE).

A minimal modern example that fixes the two issues above and gives a visible rounded shadow:

<div id="shadowBox" class="main"></div>

.main {
  width: 980px;
  height: 500px;
  margin: 10px auto;
  background: #fff;
  position: relative;
}

#shadowBox {
  display: block;
  border-radius: 12px 0 12px 0;
  box-shadow: 2px 4px 8px rgba(0,0,0,0.25);
}

was right to suggest using pixel units for testing and adding WebKit prefixes if you need to support very old browsers. After fixing the id/name and units, re-check in Chrome — if a shadow still doesn’t appear, inspect computed styles and look for clipping (overflow) or stacking issues (z-index).

Recommended Answers

All 3 Replies

Member Avatar for Kraai

webkit needs a border radius as well, you only have the shadow on it. This is for the mac users using safari browsers etc.

-webkit-border-radius: 1em 0em 1em 0em;
Member Avatar for lyrico

Thanks Kraai, but it doesn't work

Member Avatar for Kraai

Try to use px in the place of em and see if that can work. Make it something like this:

-moz-border-radius: 5px;
 -webkit-border-radius: 5px;
border-radius: 5px;

and

-moz-box-shadow: 3px 3px 3px 5px #bbb;
 -webkit-box-shadow: 3px 3px 3px 5px #bbb;
box-shadow: 3px 3px 3px 5px #bbb;
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.