I'm using the 960.gs CSS framework on a site and have hit problems almost instantly with IE (7, though I assume 6 is no better).
<html>
<head>
<link rel="stylesheet" href="design/reset.css" />
<link rel="stylesheet" href="design/960.css" />
<link rel="stylesheet" href="design/text.css" />
</head>
<body>
<div class="container_12">abc</div>
</body>
</html>
Given this HTML above (the CSS is just the files bundled with 960), Firefox and Chrome centre the grid, whereas IE pushes it to the left.
I've used 960 before without any issues, so I think I must just be doing something really stupid. Can anyone help?
You need to include a DOCTYPE at the beginning of your HTML, otherwise the CSS won't come out right in IE. You can use the one from the demo file that came with the 960 package.
It should be noted that there can not be anything in front of the DOCTYPE-tag.
For example, the default Netbeans HTML-template has a few lines of HTML comments before DOCTYPE, so be sure to delete that in order to get 960.gs to work.
Related
For some reason, my images are being vertically distorted and I can't figure out as to why (See image below).
1
2
3
Long story short what I've done is moved all my single-page-app (SPA) app code/styles and created a server-side rendered codebase. I haven't changed any of the styles or tweaked anything, yet for some reason it's distorting. This is the working styles / code from the SPA app.
4
The only hack that seems to do much of anything is when I take out the
`height:100%;`
on the images, but this has a negative effect with filling out the images which is what I'm wanting.
5
I'm using CSS Modules and have some idea that it could be related to some inheritance issues that I'm unaware of. Thanks in advance, this bug is really been driving me crazy.
I've created a fiddle that represents the working code from the SPA. https://jsfiddle.net/0L0rdk6y/
Fixed this issue by adding
<!DOCTYPE html>
in my render method when returning server side html
Example is
return
<!DOCTYPE html>
<html>
<head>
${renderBaseMeta()}
${helmet.title.toString()}
${helmet.meta.toString()}
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div id="root">${content}</div>
<script>
window.INITIAL_STATE = ${serialize(store.getState())}
</script>
<script src="bundle.js"></script>
</body>
</html>
;
Im using css button generator to create the code for my css button and it generates the css code and the html code used to insert the css code. But I don't what classname to use. I tried
But that shows up blank in the website preview.
And for an offline site with minimal design would it be better to put the buttons inline? The site will be put on a CD. I'm using dreamweaver cs6.
Well i guess you will need to learn basic HTML first. Each HTML document should contain HEAD and BODY tags. In HEAD section you link your CSS file or write your generated CSS style between STYLE tags. Something like:
<style type="text/css">
.button1 {font-size:15px; color: #cccccc; ....}
.button2 {font-size:18px; padding:10px; ...}
</style>
or link your CSS file inside HTML header with:
<link rel="stylesheet" href="/css/your-stylesheet.css">
You can also check here for some basic examples of HTML and structure of HTML documents.
w3schools
With your link you just make a link to your CSS style which will open as a plain text in browser window so you don't really include it. So include CSS style in your HEAD section either by link or to put your CSS classes and everything between STYLE tags. Once you will do this "call" your style in your links like this:
Go to Google
Local file
Thanks guys. Got it to work. I found this question and answer: mmo-champion.com and it made it clear what you guys were saying.
I deleted the <style type="text/css"> and made sure that the class was = to "classname" since that was what it was called in the CSS file because it was unchanged, and then it worked. I think it didn't work because I had the class = "button1" and I also didn't delete that bit of code before.
Gantt charts & project diary
(source: css-tricks.com)
One more thing, because Internet Explorer does not support some elements which work on Chrome or FireFox, there are some special codes for including only IE CSS file (file that works only if IE is identified):
For all the IE versions, use this:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="file.css" />
<![endif]-->
For X version only:
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="file.css">
<![endif]-->
** This code can only be used for IE7. If you want to use the CSS code for other IE version, change "7" in the line !--[if IE 7> to the appropriate version number.
For IE5.5:
<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="file.css" />
<![endif]-->
For IE6 and lower (including IE6), use if lte IE 6 or if lt IE 7.
For IE7 and higher (including IE7), use if gte IE 8 or if gt IE 7.
Sometimes IE blocks webpages' scripts or ActiveX controls.
To ignore IE block scripts or ActiveX controls, use this line, at the head of the HTML code.
NOT in the <head> tags, at the first line. It's important.
<!-- saved from url=(0014)about:internet -->
To read more about this error, read MOTW.
I am encountering a very odd problem with Twitter Bootstrap. I'm using a customised version of Bootstrap downloaded via the 'Customize' page in the Bootstrap website. I'm using a customised version, because I need to use 24 columns instead of 12 in order to give me the variety of column widths I need.
These are the custom values I entered into the Customization form on the Bootstrap website:
#gridColumns 24px
#gridColumnWidth 30px
#gridGutterWidth 10px
I left all the options checked, except for the Responsive checkboxes. The site I'm building will be fixed width only, so I switched off all five of the Responsive options.
After I downloaded the files, I created a very basic HTML page to test the grid system.
This is the HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="span9" style="background: #F00;">SPAN 9 COLUMN</div>
<div class="span15" style="background: #0F0;">SPAN 15 COLUMN</div>
</div>
</div>
</header>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
</body>
</html>
The problem is that the browser appears to ignore the CSS widths set on the .row and .spanXX styles that are set in the bootstrap.min.css file. I have checked the CSS file, and the widths are definitely included:
Lines 42-90 of bootstrap.min.css
.container,.navbar-static-top .container,.navbar-fixed-top .container,.navbar-fixed-bottom .container{width:974;}
.span24{width:974;}
.span23{width:933;}
.span22{width:892;}
.span21{width:851;}
.span20{width:810;}
.span19{width:769;}
.span18{width:728;}
.span17{width:687;}
.span16{width:646;}
.span15{width:605;}
.span14{width:564;}
.span13{width:523;}
.span12{width:482;}
.span11{width:441;}
.span10{width:400;}
.span9{width:359;}
.span8{width:318;}
.span7{width:277;}
.span6{width:236;}
.span5{width:195;}
.span4{width:154;}
.span3{width:113;}
.span2{width:72;}
.span1{width:31;}
.offset24{margin-left:994;}
.offset23{margin-left:953;}
.offset22{margin-left:912;}
.offset21{margin-left:871;}
.offset20{margin-left:830;}
.offset19{margin-left:789;}
.offset18{margin-left:748;}
.offset17{margin-left:707;}
.offset16{margin-left:666;}
.offset15{margin-left:625;}
.offset14{margin-left:584;}
.offset13{margin-left:543;}
.offset12{margin-left:502;}
.offset11{margin-left:461;}
.offset10{margin-left:420;}
.offset9{margin-left:379;}
.offset8{margin-left:338;}
.offset7{margin-left:297;}
.offset6{margin-left:256;}
.offset5{margin-left:215;}
.offset4{margin-left:174;}
.offset3{margin-left:133;}
.offset2{margin-left:92;}
.offset1{margin-left:51;}
Through much trial and error, I discovered that if I completely remove the Doctype line from the top of the HTML file, the page displays correctly! This behaviour is consistent on Firefox (19.02) and IE 10.
When I inspect the rowXX and span DIV tags in Firebug, the CSS is indicated as empty when the DOCTYPE line is included in the HTML - see the attached screengrabs below.
Screengrab from Firefox with Doctype removed from the HTML:
http://tinypic.com/r/24gp1er/6
Screengrab from Firefox with Doctype included in the HTML:
http://tinypic.com/r/13ye05g/6
Thanks in advance for any suggestions to help resolve this problem.
There may be a problem with your CSS file. Firstly #gridColumns 24px should be #gridColumns 24 (ie, specify the number of columns, not a width.
Check the result and the page source of http://fiddle.jshell.net/panchroma/pegjC/show/ or the jsFiddle
You can grab my versions of the custom 24col css from https://dl.dropbox.com/u/2665617/bootstrap-24grid/css/bootstrap.css and https://dl.dropbox.com/u/2665617/bootstrap-24grid/css/bootstrap.min.css
Hope this helps!
I am creating a website based from tumblr that seems to work fine on google chrome, but has a issue with the ad box that I have assigned to the right of the page.
I have searched google and found this related question, but the answer given does not work for me.
I have tried the following.
Just adding a html class="ie9" tag with the proper if statements.
Clearing my cache.
And checking the browser mode.
It seems to be just one element of the page. The right side does not show up correctly, but I fiddled with the customization in IE 9 and I have the exact margin reqs. However I can't seem to link the stylesheet.
Is this because I'm linking a static file in this manner?
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="http://static.tumblr.com/texnbv5/j70mi1pbq/ie9.css" />
Does this have anything to do with the fact that I am linking this stysheet from a different domain instead of the hosted domain?
Also is there anyway I can just single out the line that needs to be adjusted?
Is it possible for me to place a if statement in the css portion of my site
<!--[if IE 9]<style>#Content-right{margin:-1000}</style>
<![endif]-->
it's not working because you didn't close your comment tag. It has nothing to do with cross-domain css file fetching, which is entirely legal.
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="http://static.tumblr.com/texnbv5/j70mi1pbq/ie9.css" />
should be <!-- [if IE 9] -->
Also... what engine is supposed to be acting on this IF?
There is a very interesting article on just this topic. It addresses the need/desire to isolate browser specific CSS without having to create an entire CSS file. There are also a number of benefits to the approach. I have utilized it for a number of years due to my own needs and was unaware until recently that such analysis had been performed on the technique.
Here is the link: Conditional Stylesheets vs. CSS Hacks
Other Things of Note:
Positioning of your Stylesheets is very important in CSS. Since we can't see your other calls and you are using a separate stylesheet, it is important that you place the conditional statement under your standard stylesheet.
Example
<link rel="stylesheet" href="path/to/standard.css" />
<!--[if IE 9]-->
<link rel="stylesheet" href="http://path/to/ie9.css" />
<!--[endif]-->
This is because CSS uses the styles that were loaded last if there is a conflict. I only mention this because it could be affecting you results as it is a common mistake.
Try this code
<!--[if lt IE 9]>
<link rel="stylesheet" href="http://static.tumblr.com/texnbv5/j70mi1pbq/ie9.css" />
<![endif] -->
I hope you work it
I've made a mobile version of my site. When loading the page however, the site is first shown without the CSS applied, and after a second (at most) it applies the CSS and renders it properly. This behaviour is consistent across all browsers (including mobile ones).
Do you have any idea, how I could force browsers to load the CSS first (which is really tiny in size) and then render the content? I've seen something about including the CSS files outside the head, but as far as I know it's against the specs, and I am afraid such hack may brake things on some mobile browsers.
Thanks!
Update
Here's the source
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Albite BOOKS mobile</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/>
<meta name="description" content="Free e-books for Java Mobile phones."/>
<meta name="keywords" content="free ebooks, free books, book reader, albite reader, albite books, java mobile"/>
<meta name="language" content="en_GB"/>
<meta name="classification" content="public"/>
<link rel="shortcut icon" href="favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link href="/stylesheets/mobile.css?1289644607" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- .... -->
</body>
</html>
I believe I have found a better way to handle this...
At the top of your output file put the following:
<body>
<div id="loadOverlay" style="background-color:#333; position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:2000;"></div>
...
</body>
Then on the last line of your last loaded CSS file put:
#loadOverlay{display: none;}
This basically uses the problem against itself. The first bit of displayable html that is loaded places a blank canvas over top of everything while CSS loads and processes, the last bit of CSS to load and process removes the canvas. From my testing this solves the problem completely.
Have you ever used requirejs?
you could set after your
requirejs.config(<confObj>);
something like this
require(Array[<all your CSS & JS >]);
requirejs will do the cache (like) stuff for you!
requirejs api
You can ensure that an HTML element isn't displayed until its CSS is loaded with this simple technique:
// CSS
#my-div { display:block !important; }
// HTML
<div id = "my-div" style = "display:none;">
<p>This will be display:none until the CSS is applied!</p>
</div>
Because the div tag has display:none as an inline style, it will not be displayed until after the CSS is applied. When the display:block !important rule is applied, the div's inline style will be overridden and the div will appear fully styled.
Nathan Bunney - good idea that ispired me, but i think better way is to remove overlay with javascript after document is fully loaded.
$(document).ready( function() {
$("#loadOverlay").css("display","none");
});
Browsers read code from the top to the bottom, so the higher the code is on page, and how compact the code is, will affect the load time on the page. You can't really pre-load it like you would with images or something, so I would really look into caching the file, it's probably the best solution. Sorry theres no better alternative for this. But to be honest, one second load time isn't really too bad.