Can anyone help me fix some cross-browser issues? My website address is http://s423839726.onlinehome.us/index2.html. It looks fine in firefox 13, but in IE9 the "contact" button is all wonky.
Also, where does one learn how to fix cross-browser inconsistencies?
the inconsistency can also be seen in Opera. Your problem is the UL element. It hangs at that position on the right as it has display "inline" set and contains a stray A element. This combination moves your contact menu element a bit down. You should try to clean up the markup as it contains nested elements (mainly A elements) that are not strictly necessary. Another problem is, that you are mixing left and right floating. Additionally you are mixing left and right paddings and marging which may lead to different behaviour in browsers, makes calculating harder and can lead to collapsing margins problems. I'd advise you to try a more semantic markup for your menu like:
<ul id="topnav">
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
and with this simple markup you are able to style your menu. If you reach a point, where adjusting dimensions, paddings and margins of elements are not enough to style things the way you want, you may begin to introduce non-semantic elements (e.g. SPAN elements) within LI or A elements to have some more means to shift things around via CSS.
A simple approach to get your navigation styled is the following: Float each LI to the left and use only left margins/paddings to create visual space.
ul {
list-style-type: none;
height: 60px;
width: 300px;
margin: auto;
}
li {
float: left;
}
ul a {
padding-right: 32px;
padding-left: 32px;
display: block;
line-height: 50px;
text-decoration: none;
font-size: 40px;
color: #ccc;
}
ul a:hover {
color: #fff;
}
Something like that. Left border still missing. Your whole menu block (the UL) should be positioned to the right using left padding or right floating or whatever. Prefix the selectors with #topnav if you want to mitigate changing UL and LI styles elsewhere on your page. This is just a simple illustration that you do not need much markup or styles to have a horizontal menu like the one you want. Start simple and search for tutorials on horizontal menus using UL/LIs. There are plenty out there. Good luck.
Related
I want view plans text in input field right side how can I able to do that with bootstrap and CSS. view plans text is <a> tag and I am new to this bootstrap.
I just want to use the bootstrap to develop this input field is there any better way to do that?
I don't believe there's anything native to do this in Bootstrap. You're probably best off rolling your own solution.
Using <span>'s for the 'View Plans' text and then positioning them with CSS should get you what you need.
a.viewplans{
cursor: pointer;
position: absolute;
padding: 6px 20px;
right: 0px;
top: 0;
}
I'm using a CMS theme that contains all of Bootstrap 3. Is it possible to add a title block manually in HTML/CSS? I'm not sure if that's the block's official name... it's the purple full-width block containing the text:
CSS
Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.
in the following link (for example):
http://getbootstrap.com/css/
This title block is built into my theme and is available based on the design for the page I select.
But I was wondering if this block is available separately from Bootstrap, like a Navbar, panel, well, etc. component, that I can just include some HTML/CSS code and have it appear in the body of a page, for example.
No it's not in bootstrap but it's pretty easy to grab the style and use it anywhere:
.bs-docs-header {
font-size: 24px;
padding-bottom: 60px;
padding-top: 60px;
text-align: left;
}
.bs-docs-masthead, .bs-docs-header {
background-color: #6F5499;
background-image: linear-gradient(to bottom, #563D7C 0px, #6F5499 100%);
background-repeat: repeat-x;
color: #CDBFE3;
padding: 30px 15px;
position: relative;
text-align: center;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
check this jsfiddle
If you look at their source, they are using a stylesheet called docs.min.css, they have defined the background in here. Other then that it is just a simple <div class="container"><!--title and subtitle here-->. So the answer is a yes and a no. You can, of course, use containers seperately from your CMS when using bootstrap, but the background will not be available unless you strip it from the getbootstrap.com source.
Edit
If you see their styles, they are using this code in their docs.min.css:
#media (min-width: 768px)
.bs-docs-header h1 {
font-size: 60px;
line-height: 1;
}
}
This means, when the width of your window is above 768 pixels, it gives the h1 a font-size of 60px. When you fall under it, this code is ignored and the default bootstrap font-size is being applied.
Edit 2
To get a background-color behind it, don't apply the background color to the .container. wrap a div around it without a width value. The container width is not full width, so if you apply a background to it, its only behind the container that is centered.
Edit 3
A simple HTML structure would be something like this (you still have to include all bootstrap styles and default html tags etc.
<html>
<body>
<div id="bgColorDiv">
<div class="container">
<h1>My title</h1>
<p>Paragraph below the title</p>
</div>
</div>
</body>
</html>
I'm updating an older html page with CSS, which I've just started getting into. The new version looks good, but there are huge empty spaces now at the bottom and right of the page when the user scrolls.
The nature of the page is several different content boxes, all of which have graphical backgrounds.
The old method I was using was to use a large table to organize the layout and give the table one large, solid background image. A colleague pointed out this was too old-school and suggested I try learning divs and css.
The newer version I produced broke each box up into separate divs and images and positioned them absolutely, but there was no way to keep the content centered if the browser window was resized.
I redid the whole page again, this time using relative positioning and one main container div that I could center. Everything looks good and stays centered, but now I'm getting big blank spaces on the bottom and right sides because of the positioning.
I've seen some people say they've fixed this by using a negative margin, but it doesn't seem to be having any effect on my page (unless I'm putting it in the wrong spot).
I need to know if there's a specific way to fix this that I don't know about or if I'm just going about the whole page completely the wrong way. How can I get my elements lined up correctly, centered, and with no extra scroll space? Should I just go back to using a table?
Here's a simplified version of the page with the content taken out (just the layout):
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<style type="text/css">
body
{
background-color: black;
margin-bottom: -2000px;
}
div.main
{
width: 1100px;
margin-left: auto;
margin-right: auto;
margin-bottom: -2000px;
}
div.logo
{
position: relative;
left: 40px;
top: 60px;
z-index: 1;
}
div.window1
{
position: relative;
left: 320px;
top: -555px;
z-index: 1;
}
div.window2
{
position: relative;
left: 320px;
top: -580px;
z-index: 1;
}
div.window3
{
position: relative;
left: 680px;
top: -1250px;
z-index: 2;
}
div.window4
{
position: relative;
left: 25px;
top: -1570px;
z-index: 1;
}
</style>
<div class="main">
<div class="logo">
<img src="images/logo8.png">
</div>
<div class="window1">
<img src="images/window1_fullsize.png">
</div>
<div class="window2">
<img src="images/window2_fullsize.png">
</div>
<div class="window3">
<img src="images/window3_fullsize.png">
</div>
<div class="window4">
<img src="images/window4_fullsize.png">
</div>
</div>
</html>
You could use "em" or "%" values for top and left.
But the best be to handle this using JS.
Hope this helps.
I fixed this some time ago. I eventually did go back to using a table for the layout (which I understand is frowned upon) combined with a little bit of relative positioning, but I made sure everything was done with css and was w3 compliant:
http://www.burningfreak.com
The inherent problem, I think, is the way I designed my older pages, visually. They were highly graphical and usually made up of one contiguous background image, with a lot of art making up the section borders, etc. The general layouts tended to be unusual shapes, and I would then over-lay text and content on top on that. Unfortunately, it's very difficult to get looking right if the sections are separated.
I've since designed newer pages using only divs and css and it seems to work well, although it's a bit trickier to get working. The key, I think, is to come up with a look and style that I know is going to work using that technique from the start.
I have a typical link on a page. On hover, the link receives a border color and border-radius. In Safari 6, I am noticing that when the mouse leaves the link there is a very faint border color left behind. If you hover again over the link, the border gets darker and darker in some cases, even though the border-color is not set. If border-radius is not set, the issue does not occur.
I cannot repeat the issue in Firefox or Chrome (for Mac). The simplest fix I found was to specify a solid or transparent border color for the base anchor style. Could this just be a Safari rendering bug?
Link for the rendering issue: http://jsfiddle.net/zafer/msnak/4/
Try making the border-radius value equal to the padding on the anchor element and see if that doesn't help. I had the same problem in Safari 6 as well and that seemed to have fixed it.
So your CSS code would look something like this:
a {
display: inline-block;
padding: 15px;
border-radius: 15px;
}
a:hover {
background: #004184;
}
just ran into same issue and found that using even values (2,4,6,..) as radius fixed it for me, like so:
a{
color: white;
padding-right: 9px;
padding-left: 9px;
}
a:hover{
background-color: green;
border-radius: 4px;
}
regardless of different padding values.
The background-clip solution did fix the problem for me, check the details on https://stackoverflow.com/a/3447130/1200097 it is possible that your properties need to be reordered.
CSS3 -webkit-transition is choking on multiple box-shadow values and text-shadow values. (Chrome & Safari)
More specifically, I have two scenarios...
I have text has a document heading that has three text-shadows (for appearance of depth). I am also using the -webkit-transition rule to change the color of the text-shadow on hover so that it appears to glow on hover.
I have links which I'm using the box-shadow rule on in the same way as above, with three values for depth effect. Also using -webkit-transition here to change the color of the buttons and text for a hover effect.
The Problem: For both instances above, when hovering over the elements webkit appears to render the transition as one at a time, so the values don't all fade into their new values simultaneously. Instead, they appear as each one is rendered - one after the other, and it is a very awkward transition as you'll see.
I have several instances, and here are links to some of them:
(make sure to view in Chrome or Safari)
-Text-shadow transition on :hover for page h1 ("GIFT of HEALING" text): http://cure.org/goh
-Box-shadow transition on :hover for 1st slide call to action ("Read More" button): http://cure.org
-Box-shadow transition on :hover for footer nav links (About, Rods, etc): http://tuscaroratackle.com
Finally, here's a sample of the code I'm using:
(Not from any site, just an example I built for this question; see it live here: http://joelglovier.com/test/webkit-shadow-transition-bug.html)
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
ul {
overflow:hidden;
width:500px;
height:auto;
margin:50px 100px;
background:rgba(0,0,0,.4);
border:1px solid rgba(0,0,0,1);
-webkit-border-radius:10px;
-webkit-box-shadow:inset 0px 0px 5px rgba(255,255,255,.5),0px 2px 10px #6e5e4c;
-webkit-transition:all .5s ease;
}
ul:hover {
-webkit-box-shadow:inset 0px 0px 10px rgba(255,255,255,.5),0px 2px 10px #92d400;
}
li {
display:inline-block;
}
a:link,a:visited {
float:left;
display:block;
padding:6px 10px;
margin:10px 20px;
font:bold 18px/22px Tahoma,Helvetical,Arial,sans-serif;
text-decoration:none;
color:#000;
background:#92d400;
-webkit-border-radius:4px;
-webkit-box-shadow:inset 1px 1px 0px #b7f52f,0px 4px 0px #5c8500,0px 3px 10px #000;
-webkit-transition:all .5s ease;
}
a:hover,a:focus {
background:#198c45;
-webkit-box-shadow:inset 1px 1px 0px #1ac65c,0px 3px 0px #046228,0px 3px 10px #fff;
}
a:active {
position:relative;
top:1px
}
</style>
</head>
<body>
<ul>
<li>link 1</li>
<li>link 2</li>
</ul>
</body>
</html>
So the question here really is is there any way to prevent that ordered rendering, such as using different syntax in my CSS? (such as a specific order of the multiple box-shadow values, or using multiple box-shadow declarations instead of adding them all into one rule?)
05/09/2011 UPDATE: The bug has been reported to Webkit (see Husar's comment below). Also, I see that recent builds of Chrome (specifically my current 10.0.648.205 version) is rendering a smoothe transition now, effectively eliminating the bug. Safari however (version 5.0.5 (6533.21.1)) still displays the buggy rendering.
Apparently this is just a bug with webkit rendering, and there is no apparent fix.
I've also noticed that when you use jQuery, for example, to simply fade text in or out, WebKit "hiccups." So basically, I'm going to go out on a limb and say that I don't think your particular styles have anything to do with it. I could be completely wrong. If you find out what the deal is, I'd love to hear a solution because I too have run into this annoyance a time or two.
this could help to fix this problem on rendering for hovering events
-webkit-transform: translateZ(0px);
-moz-transform: translateZ(0px);