1 reply [Last post]
SadruddinW
SadruddinW's picture
Offline
Regular
Sheffield
Last seen: 1 week 1 day ago
Sheffield
Timezone: GMT+1
Joined: 2007-08-03
Posts: 12
Points: 5

Hi. This page:

http://sheffieldtrauma.com/aboutmnew.html

and this css file:

http://sheffieldtrauma.com/traumam.css

On a menu (left usually, centre top on smaller screens) some of the sub-headings are inset, like this:

.main-nav-indent a {padding-left: 30px;}

and called in html like this:

<nav class="main-nav">
	<ul class="main-nav-ul">
   	<li><a href="index.html">Home</a></li>
 
		<li><a href="trauma.html">Trauma</a></li>
        <li class="main-nav-indent"><a href="trauma3phase.html">3 Phases</a></li>

(The indented line is the bottom one)

So...
Testing on chrome, and on firefox on my laptop everything is fine and dandy, and when my screen drops below a width of 640px the menu goes to the top under the header, and the submenus continue to indent.

On my 'phone, though, things go all quirky.

On firefox, all good, but on chrome on my Samsung Note 4 doesn't indent the subheadings at all

Also, the Note 4 is a claimed 1440 x 2560 pixels, and yet the screen behaves as though it is less than 640px.

Sorry, the second question just occurred to me as I was typing, and may not belong here.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 6 hours 40 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9677
Points: 3745

Too many classes for nothing

Use html properly and you'll have the advantage of the cascade.

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta content=
    "width=device-width, height=device-height, initial-scale=1"
          name="viewport">
    <title>
      Test document
    </title>
    <style media="screen">
    /*<![CDATA[*/
 
    body, html {
	font: 100%/1.5 sans-serif;
	margin:0
	padding: 0;
    }
 
    p {
	font-size: 1em;
    }
 
    ul {
	padding-left: 0;
	margin-left: 0;  /* for legacy IE and Opera */
	list-style-type: none;
    }
 
    ul ul {
	padding-left: 2.5em;
    }
 
    /*]]>*/
    </style>
  </head>
  <body>
    <h1>list indention</h1>
 
    <ul>
      <li>1st item</li>
 
      <li>2nd item
	<ul>
	  <li>sub-item</li>
	</ul></li>
      <li>3rd item</li>
    </ul>
  </body>
</html>

Try to clean up all those unnecessary classes.

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.