0

I have uploaded my site to the web server which address is http://dsbangladesh.com. All the styles are working fine in the localhost. But look at the Hours sidebar content at the page http://dsbangladesh.com/shawarma-house-banani/b/6. The font size is larger (16px). But it should be 13px as the main body font size. Inspect element is not showing any override. Why the difference is there? Like this many of other elements are rendering with strange css property. For example the login modal. It should be on the middle of the page but coming at the bottom. Please help me to find out the problem.

Thanks.

Tanjima Tani
  • 580
  • 4
  • 18

1 Answers1

0

It looks like you're seeing a user agent stylesheet issue. It's a little different depending on the browser you use, but the fix is the same.

First, to identify the issue, open up your web inspector to view the applied CSS and check out the style applied to table. In Chrome Inspector, I see there's some user agent styles applied to the general table element, namely font-size: medium;

enter image description here

The fix here is pretty simple - override the user agent default style. The direct fix would be to add table{ font-size: inherit; } to your CSS sheet, but a more in depth fix is to use a CSS Reset snippet. There's quite a few options to use such as YUI, Eric Meyer's Reset and Normalize.

Community
  • 1
  • 1
DACrosby
  • 11,116
  • 3
  • 39
  • 51