I am trying to display a page with different styles based on PC or mobile.
My html,
<link media="only screen and (max-device-width: 780px)" href="iPhone.css" type="text/css" rel="stylesheet" />
<link href="pc.css" type="text/css" rel="stylesheet" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My first styled page</title>
</head>
<body>
<!-- Site navigation menu -->
<ul class="navbar">
<li>Home page</li>
<li>Musings</li>
<li>My town</li>
<li>Links</li>
</ul>
<!-- Main content -->
<h1>My first styled page</h1>
<p>Welcome to my styled page!</p>
<p>It lacks images, but at least it has style.
And it has links, even if they don't go
anywhere</p>
<p>There should be more here, but I don't know
what yet.</p>
<!-- Sign and date the page, it's only polite! -->
<address>Made 5 April 2004<br>
by myself.</address>
</body>
</html>
my pc.css,
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }
and iPhone.css,
body {
color: #FFFFFF;
background-color: #000000 }
ul.navbar {
display : none }
I tested this with chrome through Inspect Element and selected IPhone4 option, the menu links were not displayed as expected but the color and background-color styles in iPhone.css was not taking effect. It is shown as line crossed.
Please help me find where it goes wrong or provide a standard way to do this.
Thanks.
Swap the two <link> elements. The generic stylesheets should go first, since their rules will get overridden by rules from more specific (device-specific) stylesheets that follow (if any).
You should also place the <link> tags inside the <head> tag - otherwise your HTML is heavily malformed. There's a lot of code in WebKit that tries to handle this as gracefully as possible, though...
Related
In the following example the color selectors in the <li> styles are not having an effect but the background-color and font-weight ones work just right.
If it isn't just operator-error but some subtle feature conflict I'd love to know where to find the reference for the next odd thing I trip over. I've tried removing the background-color and using the numeric value for the color.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- based on https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements -->
<title>Untitled</title>
<meta name="generator" content="BBEdit 8.2">
<style>
ul {
padding: 0;
}
li {
padding: 3px;
margin-bottom: 5px;
}
li:nth-of-type(even) {
background-color: #ccc;
color: darkred;
}
li:nth-of-type(odd) {
background-color: #eee;
}
li:hover {
font-weight: bold;
color: red;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<ul>
<li>United Kingdom</li>
<li>Germany</li>
<li>Finland</li>
<li>Russia</li>
<li>Spain</li>
<li>Poland</li>
</ul>
</body>
</html>
You need to set the color on the anchor when it is hovered.
a:hover {
color: red;
text-decoration: underline;
}
Currently it's using the default color for anchors when hovered and red is not being inherited.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- based on https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements -->
<title>Untitled</title>
<meta name="generator" content="BBEdit 8.2">
<style>
ul {
padding: 0;
}
li {
padding: 3px;
margin-bottom: 5px;
}
li:nth-of-type(even) {
background-color: #ccc;
color: darkred;
}
li:nth-of-type(odd) {
background-color: #eee;
}
li:hover {
font-weight: bold;
}
a {
text-decoration: none;
}
a:hover {
color: red;
text-decoration: underline;
}
</style>
</head>
<body>
<ul>
<li>United Kingdom</li>
<li>Germany</li>
<li>Finland</li>
<li>Russia</li>
<li>Spain</li>
<li>Poland</li>
</ul>
</body>
</html>
FWIW, I'd switch from the HTML4 doctype to an HTML5 doctype.
<!DOCTYPE html>
It's because there are more specific rules that are overriding your styles on the li elements. Each browser has it's own set of default styles called "user agent styles", which are determined by the browser. There is a user agent style for anchor tag color, but there isn't one for font-weight. Because of this, the inherited value of font-weight is applied to your links on hover, but color is not. Any value that is inherited has a lower "specificity" than any other style (even the default user agent styles) that might be applied. As you can see from the image below, in chrome the color is set to -webkit-link. There is a similar style in all other major browsers.
To correct the issue, you need to apply your style directly to the anchor. You can do this with a rule for li:nth-of-type(even) a, a:hover (or li:hover a but I prefer to keep my :hover styles on an anchor only), et.al. The point is, you need the style to be on the anchor itself. Otherwise, it's just implicitly inherited and the browser will consider its own user agent styles to be the more specific ones.
Maybe try using hex colors instead of the way you have them typed?
you could try putting the styles inline on the list? ie.
try using applying the css to the a tags instead of to the li tag ie:
a:hover{
color:red;
};
try using the nth child selector instead of nth of type:
ul > *:nth-child(2n) <- for even
ul > *:nth-child(2n-1) <-for odd
I'm honestly not sure but I think something in the above should work. If not, please let me know and I'll try to help more.
This is my css code what should i add to reduce the size of the link to where its just the word is a clickable link?
<style>
ul {
list-style-type: none;
}
li {
float: center;
}
li a {
display: block;
color: Black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
text-decoration: underline;
background-color: #6CCFFFb1;
}
.active {
background-color: #6CCFFF ;
}
</style>
</head>
I've read some stuff but most code I've added hasn't worked or distorted the image of the webpage.
<!DOCTYPE html>
<head>
<title>Andis Place</title>
<link rel="stylesheet" type="text/css"href="stylesheet.css"/>
</head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<body style="font-family:Courier New;" bgcolor="White"
<head>
<h1 style="color:Orange;"> <center>Welcome to Andis Place</center></h1>
</head>
</body>
<body>
<p style="font-size:15px;">Enjoy… </p>
<!DOCTYPE html>
<html>
<body>
<ul style="list-style-type:none">
<li class="external-link">
Soundcloud
</li>
<li class="external-link">
Shop
</li>
<li class="external-link">
Photos
</li>
<li class="external-link">
About Me
</li>
</ul>
</body>
<body>
</body>
</html>
This is my html code.
Move where you do your float.
Change your style from this:
ul {
list-style-type: none;
}
li {
float: center;
}
li a {
:
:
To this:
ul {
list-style-type: none;
float: center
}
li a {
display: block;
color: Black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
:
:
Notice that I removed the "li" style altogether... also remove the style application on the UL tag itself. The CSS is sufficient.
I would recommend that you spend some more time working on some html and css basics while you are trying to fix this problem. I see a lot of errors in your markup and your styles that, although they may not be related to this particular issue, do make it harder to isolate just this behavior that you want to modify. The Mozilla HTML introduction is a good place to start.
Particularly you want to make sure that your HTML document is structured correctly. Only one body tag, no display content in the head tag, proper sets of opening and closing tags, etc. Focusing on these fundamentals makes debugging your code a lot easier (for you and others).
You are also trying to set a few css properties with values that don't actually exist, such as float:center.
As for this particular behavior you are seeing, this happens because it is the default behavior for block level elements to fill their container 100%. So your list items are stretching all the way across the screen, and you have set your anchor elements display: block as well, so they are stretching all the way across the screen. Try removing display:block and text-align:center from the anchor elements and just setting text-align: center on the li instead. (It is not necessary to set display: block on an li because that is it's default value.
You can see a very simple example here in this codepen.
On a Windows 7 with IE8, I find display: inline-block works quite well. However, after I compile the html file into chm, the page inside chm does not display well, as if inline-block does not take any effect.
Is there a way to have chm display the same as in IE8? Thank you.
My html source is:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>title to fill</title>
<meta charset="utf-8">
<style type="text/css">
#topcanvas {
z-index: 0;
top: 0;
left:0;
width:100%;
}
#chjnavi {
font-size: 10pt;
background-color: #eee;
padding: 0em 1em;
list-style-type: none;
position: relative;
z-index: 0;
}
#chjnavi ul {
margin: 0;
padding: 0;
}
#chjnavi li {
margin: 0;
padding: 8px;
display: inline-block;
/* !!! */
cursor: pointer;
}
</style>
</head>
<div id="topcanvas">
<div id="chjnavi">
<ul id="navibar_topul">
<li id="gentoc-t">item 1</li>
<li id="codecolor-t">item 2</li>
<li id="linenum-t">item 3</li>
</ul>
</div>
</div>
<p> My text. </p>
</body>
</html>
I find the answer finally. A post at west-wind.com tells me that I need to do a registry hack to have CHM reader(hh.exe) use IE8 rendering mode, otherwise, hh.exe uses at most IE7.
The registry hack is: Save the following code to a .reg file, then double click to import into registry.
REGEDIT4
[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\MAIN\FeatureControl\FEATURE_BROWSER_EMULATION]
"hh.exe"=dword:00001f40
OK. At least there is a solution for IE8 M$ system.
This question is related to Will the IE9 WebBrowser Control Support all of IE9's features, including SVG?
Instead of Inline-block you with have to use float:left; for IE8 as it doesn't support the property of Inline-block;
So this is what you will have to add to your code.
#chjnavi li {
margin: 0;
padding: 8px;
display: inline-block;
cursor: pointer;
float:left\9; /* This works for IE8 and below so apply this to your code*/
}
UPDATED:
I have found out this : margin: 0 auto; in the body {} block of the style sheet makes the header move. If I remove it, the banner header picture moves to the right. So that piece of line is the culprit. Does anybody know why?
As I have progressed (somewhat in the mystery) the question goes the other way.
I have this header file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<link rel="stylesheet" href= "<?php echo base_url() ?>css/main_style.css" />
<link rel="stylesheet" href= "<?php echo base_url() ?>css/webform.css" />
</head>
<div id="header" class = "header"><h1 class="header">Real Estate Worldwide</h1> </div>
<body>
Which connects to this View file (I am on MVC)
The code in the view has nothing to do with the issue, I asked so we'll skip it.
Then I have this Style sheet.
<style type = "text/css">
::selection{ background-color: #E13300; color: white; }
::-moz-selection {background-color: #E13300; color: white; }
::webkit-selection{ background-color: #E13300; color: white; }
body {
background:url('../assets/uploads/miweb/gradient2.png');
background-repeat:repeat-x;
margin: 40px;
font: 13px/20px normal Helvetica, Arial, sans-serif;
color: #4F5155;
width:600px;
height:500px;
margin: 0 auto;
}
#header {
float:center;
background: url("../jq185/css/start/images/ui-bg_gloss-wave_75_2191c0_500x100.png") repeat-x scroll 50% 50% #2191C0;
font-family: 'trebuchet ms',geneva,arial,tahoma,sans-serif;
font-size: 10px;
margin: 0 auto;
margin-top: 2px;
padding: 0;
width: 1050px;
h2 {color:#ffffff;}
}
.header {
color:#ffffff;
}
ISSUE:
If I remove the 3 selection ::selection lines from the style sheet, the gradient effect, from the background body disappears.
If I leave it there, then the gradient effect works but then the #header jpg file that you see down the style sheet changes its position from the centered marging: 0 auto; to the right.
You have the full code there. I am puzzled as hell, because I cannot understand why something like ::selection would have a radical effect on the code snippet that refers to body {} where the call to the gradient picture is and also affects the font style within that body {}
II UPDATE
Here is the Controller
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Home_c extends CI_Controller {
function __construct()
{
parent::__construct();
$this->load->model('home_model');
}
public function index ()
{
$this->load->view('header');
$this->load->view('home');
}
public function load()
{ $this->load->view('header');
$data['paises'] = $this->home_model->devolverPaises();
$data['ofertas'] = $this->home_model->devolverOfertas();
I wouldn't be surprised if the strange effects you're seeing are tied to not having proper markup.
EDITED: As I made comments, I realized the may not have been clear enough for OP.
Your HTML structure needs to be valid, to start with:
<!DOCTYPE html >
<html>
<head>
<!-- title, meta, styles, etc go here -->
</head>
<body>
<!-- all your other content goes here -->
</body>
</html>
Make sure that when your page renders in the browser, when you look at View Source, you see those container elements in their proper places, nested as such. Better yet, run your page through a validation service. (http://validator.w3.org/ for example)
You have invalid CSS:
#header {
float:center; /* no such attribute... only left, right, none, or inherit */
h2 {color:#ffffff;} /* you can't nest tags inside other specs, except with the use of pre-processors like SASS or LESS */
}
It goes without saying that I'm not having any issue with modern browsers. Here is my page code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<body onload="initializeWidgets();">
<!-- ### Banner ### -->
<jsp:include page="part_banner.jsp"></jsp:include>
<!-- Extra space occurs here... -->
<!-- ### Filters and Table ### -->
<div class="G_overallContainer">
<div class="G_subContainer">
<div class="G_subContainerSection">
<h:outputText value="Filtering Options" styleClass="G_subContainerSectionHeader"/>
<!-- ...here... -->
<!-- ### Filter bar ### -->
<jsp:include page="part_filters.jsp"></jsp:include></div>
<!-- ...here... -->
<div class="G_subContainerSection">
<h:form id="tableForm">
<div class="table">
<h:dataTable value="#{tableDataBean.data}" var="data"
headerClass="tableHeaders"
rowClasses="oddRow,evenRow">
</h:dataTable></div>
<!-- ...and somewhere after here -->
</h:form></div></div>
<h:messages layout="table" style="color:red;" showSummary="true" showDetail="false"/></div>
</body>
</f:view>
</html>
Here is my css for the nested div containers:
body {
margin:0px;
border:none;
padding:0px;
width: 100%;
}
.G_overallContainer {
position: static;
display:block;
border:none;
padding: .25em;
border-width: 0;
border-style: none;
border-spacing: 0;
}
.G_subContainer {
display: block;
border: none;
padding: .25em;
margin:0;
border-style: none;
background-color: #0f2d65;
}
.G_subContainerSection {
display: block;
margin: .25em;
border:none;
}
.G_subContainerSectionHeader {
font-style: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
display: block;
padding: .5em;
background: url(../image/steel-blue.png) repeat-x;
color: #000000
}
It looks like there is about 10 to 15px extra space in between each of these elements in IE6. I am tempted to blame the div tags as I am aware that there are some IE6 bugs that cause issues like this due to extra white space within the divs, but the extra space only occurs after certain div tags like the two subContainerSections and after the banner which contains no divs. I have tried setting all margins to zero but that does not solve the problem. It is as if there is something BETWEEN the margin and the border of the offending elements...
What do you guys think?
edit:
Threw my DOCTYPE up there for clarification
Here is an extremely cut down version of my page: link. If you view it with IE6 you will see the separation of the "filters" header from the body.
If you could throw up an example on jsFiddle that would help a lot, but I do know that IE6 has problems with horizontal spacing that can be fixed by settings the elemnts zoom,
.myhorzel{
zoom:1;
}