XHTML 1.0 Strict, CSS and img borders

I am using XHTML 1.0 Strict on my website and have the following CSS style on my links: a:hover { border-bottom: 1px dotted #447799; } and my images: a img, img { border: none; text-decoration: none; } Yet, when I hover over my title banner the bottom border still shows up dotted and blue. Obviously, I can't use border="0" because it is not part of the XHTML 1.0 Strict Doctype. You can see my site here: armorycraft.com Suggestions?

Css SharePoint Title Table Enlarging on Specific _layout pages

I am experiencing an issue with a custom SharePoint 2010 master page that I have been developing and styling with an external style sheet. Hardly any changes have been made to the actual master page code, short of the inclusion of a permission string and the addition of an advanced search control within the title table. As mentioned, I have used an external style sheet to style the master page, page layout, and search control, and have limited (with !important) the height of the titletable and

CSS Syntax Error checker in Dreamweaver?

I use Adobe Dreamweaver CS5 to code websites, are there any syntax checkers that can check for common spelling mistakes say if I spelt "position:relative;" like "postion:relative;"? Alternatively can I find something with another program? Thanks Josh

alternate coloring of div elements css

i have the following DOM elements: <div class="document> <div class="text"> some text1 </div> <div class="text"> some text2 </div> <div class="text"> some text3 </div> <div class="text"> some text4 </div> </div> i want to color them alternately, meaning text1, text3 are same color and text2, text4 are of same color. how can this be done using css?

CSS-property for numbers

Is there a way to automatically add a CSS-property, like letter-spacing, to every number but not to the other characters?

Css How can I create a GWT layout which has a fixed header and footer that allows a scroll pane center to automatically size?

I have a design in mind which I'm struggling to convert to a GWT layout. Basically I need a header and footer which have a fixed pixel height and full browser width, the snag is they must both always be visible to the user. I've been playing around with the DockLayoutPanel with north and south panels and then adding a scroll panel to the center, this works great when I use Unit.PCT but I need to fix the north and south panels so that they are always a set height in pixels but still allow the c

@media print css issue

I have added media print css like this @media print { div#file1 { height: 100%!important; overflow: scroll; } } Problem is that it is working fine in firefox but not in chrome while printing. it doesn't take height in chrome. WHen i try to give min-height: 100% to div then it is working but print only visible area not after scroll.

CSS Preprocessors - Building CSS for every page load or just for a build process?

Just getting into the fun world of CSS preprocessors. Let's say we're using LESS to render our CSS. I'm wondering about two different approaches: Using LESS to render the CSS on every page load. Using LESS as part of the Build Process and just using the rendered CSS in production. I'm wondering if there are times where you'd use one and not the other. On one hand you have dynamic CSS a runtime and the other static CSS build from a (hopefully) concise and clear LESS template.

Simple CSS3 keyframe animation doesn't work in Firefox

I have created one simple CSS3 keyframe animation that switches bg image of an element. It is working perfectly, but my trusty Firefox has failed me. I was using prefix free at first, then I thought that it may be the problem, after that I wrote all prefixes by hand, still nothing in Firefox. You can see the example at: http://madebym.me/test/nimbus/index.html Also, here is the relevant code, the truck should switch lights on and off. -webkit-animation: switch-truck-lights 1s linear infinite

Css Why is rendered text different sizes on Chrome and Firefox even when using HTML reset?

All, I understood that setting font-size: 100% on the HTML root element, along with an HTML5 reset and rem units, should cause text to render at the same size on different browsers. However I see larger rendered text on Firefox than on Chrome on OS X. Here's a test case: <!DOCTYPE HTML> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(document).ready(function() {

MVC jQuery UI CSS urls not resolving after deployment

The title pretty much says it all. In the jquery-ui.css it defines styles like: ui-widget-content { border: 1px solid #aaaaaa/*{borderColorContent}*/; background: #ffffff/*{bgColorContent}*/ url(images/ui-bg_flat_75_ffffff_40x100.png)/* color: #222222/*{fcContent}*/; } This works fine in dev, but once deployed the url no longer resolves. The site is deployed under the default web site in IIS7. So in the browser console I can see that its looking for the image in http:// (servername)/(appName)

<div> blur of part of Background image with css

I use this Is it possible to use -webkit-filter: blur(); on background-image? solution to make blurry backgroung image and it works great! But I want to make some <div> over background and make it blurry. So background should be clear and blurry under <div> only. If I move blur filter on that div it became blur, but background image still clear. HTML is simple: <body> <div class = "background"></div> <div class = "content"></div> </body>

Css Colored Dots :before and :after h2

I'm trying to put colored dots before and after h2. This is my CSS; h2:after { width:10px; height:10px; border-radius:50%; background: #b83b3b; } h2:after { width:10px; height:10px; border-radius:50%; background: #b83b3b; } But no dots show up. Any leads? Thanks! Jaeeun

Css Firefox Float Misbehavior

I have run into a float layout problem with a site that I am currently redeveloping - take a look at here. The intended layout is An empty padded area to the left (leftGap) A vertical menu bar adjacent to it (menuBar) The main page body (bodyBox) Here is the relevant CSS #leftGap {width: 200px;float: left;min-height: 1em;} #menuBar {width: 250px;float: left;min-height: 1em;} #bodyBox {width:**???**px;float:left;clear:right;min-height:1em; padding:0.5em;padding-left:8em;padding-right

Css align div right (not to right screen edge)

I'm just learning and I'm trying to make my 4 div's layout to my desired page size (not to whatever size the user's window is open to). Basic problem, but I can't get my right div to attach to the left div and not necessarily the right side of the user's window. Here is my code and thank you in advance. HTML: <!DOCTYPE html> <html> <head> <title>all.about.me</title> <link rel='stylesheet' type='text/css' href='me_stylesheet.css'/> </hea

Css How to stack two variable width divs, and then have text wrap to the side of both

I've been stuck on this seemingly simple issue. I want to take two divs of variable width, and stack them left aligned. (basically the normal behavior of two block elements). But then I want to have text wrap around both divs. My problem is that the first div is of variable width, and I can't figure out how to get the text to wrap both elements, and not leave whitespace making up the difference in div widths. Example: I = Div 1 / A = Div 2 , T = Text This is how I'd like it to work. IIITT

Safari css stops working on larger screen

I have inherited a web page with a large amount of CSS. I'm working on a Mac Book Pro laptop connected to a 29" monitor. In Safari on the laptop screen the page and the css work as expected. If I drag the Safari window on to the monitor the CSS stops working. I'm completely baffled. What could be causing this in the CSS, what should I look for.

Css Modify style of Recaptcha

Is it possible to modify the style of the new div NO CAPTCHA RECAPTCHA of google using css? <div style="background-color:transparent; color:transparent; border:none" id="google" class="g-recaptcha" data-sitekey="mypublickey"></div> because I tried with background color and border but it doesn't work. Am I doing it in the wrong way or it is not possible?

Css Create PDF with NodeJS, Jade and PhantomJS

I want to create a PDF from a template in Jade using PhantomJS, I can create the PDF document, but the CSS is not applying, I create two routes the first one render the template to the web browser and the second one generate de PDF with the exact same jade template, in the browser all is right, but the PDF don't apply CSS. My app.js is: var express = require('express'), routes = require('./routes'), http = require('http'), path = require('path'), bodyParser = require('body-pars

Css Clock-like rotation with animation keyframes

I've painted 8 dots in a circle. I want to rotate the circle, but abruptly like a clock hand, not smoothly. For every 12.5% of the time it takes to do the full rotation, I want to increase the rotation angle by 45 degrees. I defined my animation like this: @-webkit-keyframes clock { 0% { transform: rotate(0deg); } 12.4% { transform: rotate(0deg); } 12.5%{ transform: rotate(45deg); } 24.9% { transform: rotate(45deg); } 25%{ transform: rotate(90deg); }

How to allow horizontal overflow in CSS?

I built a rather minimal personal webpage for design work and want each project to be shown as a long horizontal scroll. I'd been controlling the width of each page by pixel and it works for browsers, but I noticed that when I open the page on my phone, the last image always jumps to the next line. I am wondering how to compensate for this, if there is an easy fix. Sample link : http://gh-he.com/Projects/Sutro.html If you open with browser, probably fine. Open with phone, it jumps. I am by n

Css Octagon with Border and Background Image

I folowed this answer to create a octagon with a bg image: How can I create Octagonal mask in CSS JSFiddle How do I add a border around it? .octa { height: 100%; overflow: hidden; position: absolute; @include rotate(45deg); width: 100%; } .octa:after { background-image: url('http://lorempixel.com/400/400/nature'); background-position: center center; background-size: auto 100vh; bottom: 0; content: ''; left: 0; position: absolute; righ

Css MVC .NET App that accesses files in mobile device

I want to build a "mobile first" ASP.NET MVC (ecommerce) Website, and I need it to be as "Internet" light as possible on the company agents' cellphones since they may have limited Internet in the field. Is there a way to create a .NET Website, and have it check for local files when it's run through a mobile device?? The kind of files would pretty much be anything that's static for the site (CSS, JS, Images, some htmls...) so they get loaded from the phone's SD card instead of downloading from w

CSS div disappears on scroll

I'm working on a site which uses pure CSS and hover states to build the drop-menu. The problem is that the number of navigation items are so many that the a user has to scroll to see it on smaller laptops. But what happens is the menu disappears before reaching the bottom as if a mouseout event has occurred. Is there a way to prevent this without having to convert the menu to javascript/jQuery? http://spinov8.com/SNS_demo/shop

CSS responsive : Resizing windows VS Chrome responsive

Here's my problem. It's kinda basic but it really irritates me. I've made a responsive web page that looks really great when resizing the window manually but doesn't look so great when using the responsive tool embedded in chrome. So i decided to design according to what it looks like on Google Chrome responsive tool, but now it looks awful when i resize the window manually. Which one should i trust ?! How do i know what i'll looks like on mobile ? Edit : Also, i have this basic rule @media o

Css Safari 100vw Layout issue when zoomed - Help me understand

Has anyone seen an issue where Safari and zooming out? I have a div that has a width of 100vw, and when I zoom out, the 100vw does not re-calculate. I know that there are some quirks to viewport units, and documented on the canIuse page, however none of them seem to be what I am seeing. Am I missing a corresponding property somewhere? Here is a jsFiddle that demonstrates the issue. Load it up in Safari and zoom out: https://jsfiddle.net/4vax8Lga/ <body> <div style="background: red

Css HTML5 slider bar's thumb can't cover the track

I made a slider bar with html5 & css, like this. function showValue(value) { document.getElementById("range").innerHTML = value; } .c-zoombar { -webkit-appearance: none; background: none; outline: none; overflow: hidden; width: 200px; height: 20px; } .c-zoombar::-webkit-slider-thumb { -webkit-appearance: none; background: #5e6fd9; border: 1px solid #fff; border-radius: 50%; height: 12px; position: relative; top: -5.5px; transition: .2s; width: 12px; } .c-zo

Creating trigonometric figures on SCSS

Could anybody help me to understand how to make a right Regular polygon (This figure must have 20 angles) I made first step here http://codepen.io/anon/pen/MpbeLB (Sorry for this code.The stackoverflow dosen't support SCSS ) I use this formula http://ru.wikipedia.org/wiki/Правильный_многоугольник to find tops of Regular polygon. $colorBackground: #121d1e; $colorC: #ace9ae; $colorW: #fff; $h: 600px; $w: $h /0.75; @mixin br($radius) { -webkit-border-radius: $radius; -moz-border-radiu

Can I change grandparent inline CSS without triggering a re-render?

I'm trying to change a component's inline CSS by clicking one of its 10,000 grandchildren. World passes a callback function to its child Terrain. This component creates a grid of 100 by 100 child components Tile. Each one has a position property, which can be passed to the callback, informing World to change its CSS so that the clicked Tile is moved to the center of the screen. The following code works, but is very slow. Apparently, setState always triggers a re-render. Because my World has 10

Is it right to add style in css to semantic elements of HTML 5?

Is it right, to add styles to html 5 semantics (nav, header, footer, etc...) like we add them to divs? To use them instead of regular divs? One time I heard frome someone I respect, that we should not add any style to html 5 semantic elements - just only if it is really necessary add a bit, but no many styles to this elements. Is he right? for example <nav> <ul> ................ <ul> </nav> nav { background-color: ..... width: .... height

Ionic/Angular: Inject dynamic CSS-styles from API for dynamic content

I'm stuck with following problem: I recieve an dynamic HTML-Content-Snippet from an API with certain classes and ids applied. Additionally there a dynamic and individual CSS-Stylesheet I can access through this API, too. What i got so far: encapsulation: ViewEncapsulation.None, is important, otherwise the classnames etc. would be changed/extended by Angular. What I can't get to work is to apply the styles received from the API to the component. The first idea was to put the style-promise-r

Nesting tag name into class style in SCSS

I want to nest selector for <a> tag inside a class .class-name, in order to apply those styles only for elements who has both the <a> tag and the class .class-name using SCSS. What I want to do can be performed the following way: .class-name { font-size: 40px; } a.class-name { color: #ff6666; } <div class="class-name">Hello</div> <a class="class-name" href="#">World!</a>

Apply CSS rules based on other rule - RTL specific style

I'm trying to build a web site available in multiple cultures, with different reading direction. To do so, I simply add the dir="rtl" attribute on my root HTML element. My issue is that I have some CSS rules that are specific to one direction or the other (margins or paddings, most of the times). Unsuccessful try with attribute selector I though that I could simply use the attribute selector but the dir attribute is only set on the root element, so this wouldn't work : selector { &[di

Css Why is tab1 content is appearing in the other tabs?

I'm using bootstrap tabs. The issue is that the tab1 content is always appearing when the other tabs content is also appearing. Do you know where is the issue? Do you know why the tab1 content is always appearing in the other tabs content instead of just appears the correct tab content? Example: https://jsfiddle.net/2xahspct/ HTML: <ul class="nav nav-pills" role="tablist"> <li class=""> <a class="nav-link active" href="#tab1" data-toggle="tab" role="tab"> <spa

Css Syntax issues while trying to implement an navbar for Angular 6 project

So I'm trying to follow this tutorial here. I had a bit of an issues with the .scss file so I'm just sticking to .css because its a lot easier for me to follow. Video number 32 (section 4), minute 3:21, is where I start to get lost. I try and convert the syntax so it can all work on .css and without using anything complicated. Here is the udemy teachers code so far: @import 'variables'; .navbar { padding: 20px; margin-bottom: 40px; .bwm-search { height: 50px; width: 300px;

Css Set Margin for container

Hi I have a container. The .container-fluid is too large as it takes the entire screen and looks a little off and .container is too small. How can I adjust the size of the container. I see the margins are pretty high but if I try to adjust it breaks my re-sizing. What is the correct way to change the size of the container. Thank you

avoid menu li bottom shadow css

I'm working on a menu list and I want to get rid of the shadow under the selected li, in this example the letter C. This is my code so far. html, body { background: #0769AD; margin: 0 auto; padding: 0; } div { width: 400px; margin: 0 auto; padding: 0; text-align: center; } div ul { background: #fff; width: 100%; margin: 0; padding: 0; border-radius: 0px 0px 10px 10px; box-shadow: rgba(255, 255, 255, 0.3) 0 1px 0, rgba(0, 0, 0, 0.3) 0 -1px 0; box-shadow: 0 0 5px

Make box responsive in CSS

I am trying to make the box responsive to scale with the mobile but it turns out it is very small when I resize the window. Here is the HTML code: <div class="box"> <h1>Health Status</h1> <input type="text" id="check_infected" name="infected_check" placeholder="Infected by Corona? (Yes/No)"> <input type="submit" onclick="UpdateHealth();" value="Update"> <div class="bottom-te

Css Firefox sizes table, scrollbar appears in the middle of the page

I have a web application with a table as a container for the other elements. Every browser except FF renders the page with the scrollbar at the bottom of the page. FF shortens the table to fit the contents, giving me scrollbars like this: I've tried setting the table height to 100%, but that pushes the bottom of the table below the bottom of the window (in all browsers, no idea why). I tried setting height to auto, but it behaves the same as with no CSS at all. I can't freeze the table size bec

  1    2   3   4   5   6  ... 下一页 最后一页 共 715 页