For some reason, I'm having a problem with these two pages on my website that should have some elements look the same, but for some reason, they look a little bit different.
I have some included asp files which are linked to the same CSS files, so that is why I believe they should be the same. The spacing looks off on the about.asp page though. The index.asp page looks great, however.
Here are the two pages:
http://www.marioplanet.com/index.asp
http://www.marioplanet.com/about.asp
Any ideas as to why these are kind of screwy?
There is extra spacing on the about page, because the spacing gets removed by a style in SlideShow.css on the index page:
* {
margin:0;
padding:0;
}
The above looks like a simplistic implementation of a reset.css style.
Looking at those pages with Chrome's devtools (or Firebug in Firefox) will show that the SlideShow.css in index.asp has a * style in it (that is, every element) to set padding to 0, which makes the padding and margin of your body (and everything else) zero.
This is very bad practice on the part of whoever made SlideShow.css, and is what is mostly screwing up your layout. An css include that is intended to be used modularly (as with a drop-in slideshow) should never use a * style block, because that affects every element in the page. It should have all of its style blocks prefixed with some class to limit its effects to the slideshow module.
Looking at your SlideShow.css, it looks like you may have pasted in some CSS from elsewhere, which is where it may have been introduced. You also shouldn't include <style> tags in external CSS files.
If you remove the SlideShow.css include, your pages should look much more similar. From there, you can edit SlideShow.css to remove the * style and add the include back in, making sure it doesn't screw everything up again, but still lets your slideshow do its thing, or just find a different slideshow module.
Related
I am in the process of developing a site for a uni project, and I have built an automatically changing slider while only using css (it is a requirement of this project that I don't use anything else). The problem I'm experiencing is that when the slides change, the left margin begins to add up, and I can't figure out why.
I have tried making a page with just the html and css necessary for the slider to work and it works properly there, but not when incorporated into my main css page.
Any pointers would be appreciated!
The site this can be seen on is http://www.darkmatter-designs.com/
As you can see you have some margin between the images, which makes their widths effectively bigger a little bit. I see you applied a reset in your css, so this is probably coming from the white space in your html. A quick fix would be to put all the li and img on a single line with no spaces or carriage returns between them, like so:
<ul id="css-slider"><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_108.jpg" alt="slider"></li><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_62.jpg" alt="slider"></li><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_59.jpg" alt="slider"></li><li><img src="http://cdn.gtm.net.au/images/catalogue/sp_image_66.jpg" alt="slider"></li></ul>
I know, it's weird.
I can't figure out what the problem is.. The css is really messy, there is a lot of useless or overwritten properties.. You have to optimize it..
But somehow I found a workaround : set the width of the #css-slider to 864px.. It's not really a proper solution but it works anyway..
I'm trying to setup a preview box for an html editor on one of my pages. I made a standard <div id="preview"></div> style container, in which I occasionally drop my html source, and that works fine enough.
The problem is, bootstrap's styles are seeping into the container and 'poisoning' my preview. I see two solutions to this:
Move preview into an iframe
Apply some kind of clear/reset css to the element where I host the preview
eg:
<div id="preview" class="clean-css">
</div>
.clean-css {
div, p: {
border: 0;
margin: 0;
}
/* a bunch of reset css stuff here */
}
I consider iframe a clunky solution and sort of a last resort. I'd much rather keep my stuff on one page. So I started looking into various reset css stylesheets. Unfortunately, it seems most of them are geared towards equalizing differences between browsers and don't reset all styles to their bare values (for example, blockquote keeps its bootstrap styling).
I can keep googling for a better reset-css stylsheet, or I can try to fill in the holes in the stylesheet I have now. But before that, I figured I should ask more experienced frontend devs what's their experience with this.
Is there a more comprehensive clear css solution out there?
Is trying to clear up bootstrap a fool's errand and I should just go with the iframe instead?
After a few months of trying to make reset CSS work, the answer is: just use the &$^* iframe.
There are just too many potential problems and pitfalls, from balancing reset's class precedence to the fact that any CSS will just roll over legacy color / positioning attributes (which are still relevant in email authoring).
iframe is a headache to integrate into the page, but at least you know it can be done, and once it is done, it stays done.
Alright this is probably a newbie question but it is very much frustrating me. I clearly say in the style tags that the top blue bar needs to be snug against the top and the two side panels need to be snug against the sides.
Yet for some reason it has taken the liberty of inserting a blank white space around my html.
Here is the link: http://popularn.com/nate/error.html
See that white space on the left and at the top?
Even when I say top:0% and left:0%, it still doesn't work. It's like it's laughing at me and I've had enough. It's like it is starting the document at top:2% and left:2% and there's nothing I can do...
remove margin from the body, set top left to 0, and off course don't forget the position attribute
html,body{padding:0; margin:0;}
#someElement{position: absolute; top:0; left:0}
also -
putting position:absolute; top:0; left:0; to the body is like doing nothing
and the position of the #top_menu should be position: fixed and not fixes which has no meaning
Browsers have a set of default styles which are known as 'User-agent styles'. These are a generic set of CSS rules that it applies to elements. You know when you put a H1 in a page, and it appears big, and in bold? These are those styles.
The base elements in your pages are all styled with these UA rules. Body, HTML, div, etc - they all have a small amount of padding on them, which is where this is coming from.
Consequently, it's good practice to always use a CSS reset, when you are developing beyond basic styles. There's a couple of good ones I'd recommend. As CSS is hierarchical (hence cascading!) you need to include resets first.
Firstly is Eric Meyer's CSS reset. This applies generally to everything, and is invisible for most purposes. You include the file, everything gets reset to base.
Secondly is Yahoo UI 3 (YUI) reset, which takes a slightly different approach. They let you selectively apply a reset to different areas of a page by including a class. This is useful for some things, but for almost every small/medium sized project I'd recommend Eric's reset linked above - but it's useful for comparison and learning.
Instead of trying to tune out inconsistencies as you go along - using a CSS reset will give you a baseline for all elements which is the same on every browser. Believe me - you want this. When you get further into html, forms for example or fun stuff like that, then this kind of thing is an absolute life saver.
Hope that helps!
You need to reset the default padding and margin on any browser. I usually use this:
*{padding:0;margin:0;}
Basically this example works great on chrome and firefox but the marked table (marked with the "this table" comment) doesn't fill the whole container in IE. I want it to look like his brothers to the left. I've been looking at it for the last 30+ minutes wondering what in the world is causing it not to work. I could use the help of a 2nd pair of eyes
The whole thing is quite huge, the problem table is towards the end of the html.
The other tables that are filling up the container all have a wrapper div with a height declared on them but its missing on that one table that is not stretching. Add it and it works fine:
http://jsfiddle.net/aVkC8/1/
Oh and: Holy inline-css styles Batman!, you can greatly simplify your code with defined classes and styles for your table.
Have you tried using something like Normalize.css in order to get consistency across browsers?
From the homepage:
Normalize.css is a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards. We researched the differences between default browser styles in order to precisely target only the styles that need normalizing.
Dumb question with a simple answer, I think.
I am building a site that has a completely different layout on one page from the rest. On one page, the design requires a liquid vertical layout, so I need the following code: *{height:100%;}On the other pages I just want the default height.
I tried to add a class to the html tag, which works in the html, but not in the CSS file. I tried:
*.myClass
and
html.myClass
but it doesn't seem to work.
I can't seem to find any info on this online. Is it even possible to add classes to the html tag?
I am using wordpress, so I can easily check to see which page I'm on and add myClass.
I guess I could also use #import to get a different style sheet based on the page I'm on, but that seems like a longwinded way of doing things.
How can I specify height:100% as a value of the html tag on specific pages only?
Can anyone point me in the right direction?
Thanks,
J
Perhaps .myClass, .myClass body {height: 100%}?
It is indeed possible to add a class to the <html> tag.
Live Demo (see code)
This will work, because I just applied this in one of my projects earlier today. :)
html,body {
height:100%
}
If you have pages that require the default height, then don't load this css style. You can place it in a separate CSS file.