I'm trying to do some styling on Twitter Bootstrap modal close icon. This is the CSS I'm using:
.modal-header .close {
float: right !important;
margin-right: -30px !important;
margin-top: -30px !important;
background-color: white !important;
border-radius: 15px !important;
width: 30px !important;
height: 30px !important;
opacity: 1 !important;
}
It works pretty good on Chrome / IE, however sometimes on Firefox I get strange behavior (image is attached). Is there additional CSS rule that I have to supply to have this work on Firefox as well?
Depending on the version of firefox you may need to add -moz-border-radius: 15px
This proved to be an issue with graphic card(s) on several laptop(s) that were using Intel graphics. Funny thing is that only Firefox was susceptible to this problem.
Related
I can't figure out why the following css works in Firefox, Safari but not in Chrome. I am trying to create a top fixed navbar which is centered and have a full width black background bar while keeping the contents of the navbar to display within 1200px max-width. I need to achieve this in a Squarespace template where I can only add custom CSS to an existing template and I don't have access to the page code. So I elected the pseudo insertion approach. All is good except Chrome doesn't want to display it correctly. The site link:
https://mango-lanternfish-lzhh.squarespace.com/
Thank you for your assistance in advance.
Attila
body, #navigator header#topBar {
max-width: 1200px !important;
margin-left: auto; margin-right: auto; }
#navigator header#topBar { background-color: #000000 !important; }
#navigator header#topBar:before {
content: "";
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 85px !important;
background-color: #000000 !important;
}
I'm trying to center the text within the slider for the Customizr Pro theme in mobile view. I prefer the offset version built into the theme with the transparent overlay underneath, but the lady wants everything on her site to be centered. I'm not a pro developer but offered my help because she initially just wanted a basic site.
I tried using the code to this answer here that was similar to the CSS I was using already but it didn't work:
How to align middle/center box with text in slider with responsive in mobile view ??
This is what I'm using to center the text, which appears to be fine in desktop view but mobile is not showing up at all:
.carousel-caption {
max-width: 100% !important;
padding: 0 !important;
line-height: 14px !important;
position: absolute !important;
margin-left: unset !important;
text-align: center !important;
top: 175px !important;
left: 0 !important;
right: 0 !important;
}
The website is https://designerbackdrops.com
I still have one other issue with Safari and the tagline being off center but I'll ask about that in a different post.
Thanks for any suggestions you can offer. I'll try anything!
Here is a popular CSS trick for centering things. I have tried it on your website, and it works for desktop and mobile.
.carousel-caption {
max-width: 100% !important;
padding: 0 !important;
line-height: 14px !important;
position: absolute !important;
margin-left: unset !important;
text-align: center !important;
top: 50%;
left: 0 !important;
right: 0 !important;
bottom: auto;
transform: translateY(-50%);
}
Basically the use of these two together should center the object:
top: 50%;
transform: translateY(-50%);
I also added bottom: auto; to override another stylesheet, tc_common.min.css.
I am trying to print a page on chrome. On rest of the browsers the page and print works fine but on chrome it breaks. The border-width is updated to border-radius value in print-preview mode. On screen this issue is not appearing. I have attached the screen grab of the same for reference.
The CSS code is as follows:
.tab {
position: relative;
width: 225px;
height: 60px;
border: solid 5px #e2e0e3;
border-bottom-color: transparent;
border-bottom-width: inherit;
background-color: #FFFFFF;
border-radius: 25px 25px 0 0;
display: inline-block;}
#media print {
.tab{
display: inline-block !important;
border-radius: 15px 15px 0 0!important;
border-width: 5px !important;
}
}
It's been a while I posted this question. I have figured out the reason for this on my own.
The main culprit behind this issue was having the bottom border width as 0px. The reason being, in print mode, the border radius can not work until all borders are of same width & are visible. If any one of the borders is not visible/none, it will break the UI in preview mode & while printing. Since there were no possible solutions available to it, I just made the bottom border visible for the print mode & kept it none on browser.
I get it that this is not a true solution but sometimes, you just have to go with it.
Cheers
I have a wordpress website which is facing compatibility issues in Internet Explorer 8. http://www.sunsetbaycharters.net
The navigation menu is not loading properly in IE8 & IE7.
Bad Nav in IE8
Also, the content boxes in my site are not transparent in IE8. I understand that is because I'm using RGBA and I need to know how to fix it.
Please tell me how can I fix the navigation menu in IE8 & IE7 and the rgba transparent box.
CSS Code for Nav Menu:
div#top-menu, div#top-menu.et-fixed {
background-color: white;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
z-index: 1000;
box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.8);
height: 80px;
text-align: center;
}
For the content box background transparency you'll have to use a background image (as IE8 doesn't support transparency). Just make a 5x5 square PNG of the color/transparency you'd like to use and set it as a background repeat. For example:
.target-element {
background-image: url('images/your-transparent-tile.png');
background-repeat: repeat;
}
As for the box spacing issue, you'll have to give us a look at your CSS. It'll probably be something to do with IE8's lack of display: inline-block support.
My private webpage's main content is not displaying strangely within Firefox. The header and footer bar both display and the main text is placed adjacent to them towards the right. Occasionally, the footer also moves above the main text. I'm guessing this is all one issue involving the positioning of DIVs that I'm somehow missing. [This has been solved]
The height of two DIVs that are equally as tall when displayed in Chrome is also different. This issue also occurs in Safari but in a different way. There is a 1 px gap between the logo and the navbar that isn't present when viewed in Chrome or Firefox. Can anyone think of a way to reset all of the browser defaults to prevent similar things from happening in the future?
The website is currently not online yet and I'm debugging it for final release. (I don't really want to release this in the current condition as it will frustrate anyone who doesn't use a webkit browser.)
Also, as a side note, anyone know how to fix the CSS errors I'm getting in Internet Explorer 9? The gradient in the nav bar is gone, some areas have missing background color, and all picture links have annoying boxes around them.
EDIT: I saw in an online CSS gradient generator what I need to do to make the gradients work in IE9. The background issue apparently stems from the same source.
Also, is anyone in Opera experiencing issues with the latest debug version at http://jsbin.com/ipixay/1? (Credit for this one goes to Sunyatasattva.)
The link to the fiddle (where the code is posted at) is: http://jsfiddle.net/aaQSD/7/ Please forgive me for the amount of CSS that's still there, but I can't tell which causes the Internet Explorer 9 problems.
My best guess is that the Firefox problem lies somewhere in this section of CSS:
body {
margin: 0;
padding: 0;
text-align: center;
font-family: Times;
background: #efefef url(pics/background.png) repeat top center;
}
#container {
overflow:auto;
width: 95%;
min-height: 100%;
min-width: 946px;
margin: 0 auto 10px auto;
}
#content-wrapper {
width: 100%;
float: right;
text-align: left;
margin: 10px 0 0 0;
}
#content-inner {
padding: 0 15px 0 15px;
}
.center-slide {
font: normal 62.5%/1.5 Times;
letter-spacing: 0;
width: 900px;
height: 485px;
position: relative;
padding: 20px 0 0 0;
margin: 0 auto 0 auto;
background-color: #FFFFFF;
border-radius: 8px;
}
.boxes {
margin: 0 auto 0 auto;
width: 900px;
}
.left-box {
float: left;
background-color: #FFFFFF;
border-radius: 8px;
margin: 10px 5px 0 0;
padding: 20px;
width: 500px;
position: relative;
}
.logo {
width: 26%;
text-align: center;
float: left;
font-family: Times;
font-size: 65px;
font-weight: bold;
color: #FFFFFF;
padding: 10px 0 0 0;
background-image: -moz-linear-gradient(0% 22px 90deg, #0B3474, #517ABA);
background-image: -webkit-gradient(linear, 0% 0%, 0% 70%, from(#517ABA), to(#0B3474));
}
header {
width: 100%;
min-width: 863px;
background-color: #000047;
float: left;
padding: 10px;
color: #FFFFFF;
text-align: left;
font-size: 20px;
overflow: hidden;
margin: 0 0 10px 0;
}
nav {
background-color: #6a6a6a;
font: 16px Times;
min-width: 700px;
float: right;
width: 74%;
}
footer {
font-family: Times;
text-align: center;
background-color: #000047;
color: #FFFFFF;
text-align: center;
padding: 10px 0;
width: 100%;
min-width: 863px;
}
Here is the list of things that have been fixed:
Unwanted boxes/borders around picture
Firefox display issue
Glitchy footer
EDIT: I'm currently working on making a fiddle with the minimal code to replicate the issue as suggested in the comments. I hope you can forgive me for my noobish mistake. Thanks, everyone who have responded so far!
EDIT 2: The fiddle is out! I've removed the pandora's box of code that used to be below.
The header and footer are displayed adjacent to the main container
Is there a reason why they are floated? Removing the float: left rule from the header, makes the container stack below it. If they need to be floated for some reason I am not seeing, perhaps you should consider adding a clear?
Logo height different from navbar element heights
This piece baffled me a bit: I think the culprit is browser default line-height property, which, on Chrome, is coincidentally making your elements align.
Your nav elements have a set line-height of 61, plus a vertical padding of 12 on both sides, adding up to 85px. Your logo has no defined line-height and a font-size of 65px plus a padding-top of 10px. In Firefox this is 10px short.
To fix this, just set the line-height to your logo element as well.
Here is a working JSBin of your code:
Working example
Internet explorer problems:
Missing gradient
Missing background
Annoying border
I don't have IE9 at hand right now, so I might look into it later if you need it, but here are my guesses.
As for the missing gradient, your CSS specifies only webkit and mozilla vendor prefixes. You might want to take a look at the -ms– prefix as well, and check which rules really need it and which don't.
I am skipping the missing background part because it's quite vague and I am not testing on IE right now.
As for the border around linked images, you could perhaps add this rule to your CSS:
a img {
border: 0;
outline: 0;
}
EDIT:
Safari annoying one pixel gap
As for the Safari annoying one pixel gap, it apparently comes from the fact that Safari doesn't calculate well your float: left + width: 26% plus float: right + width: 74%. Adding a .1% to the first element width fixes the problem, but it is not the most elegant solution.
The best solution for your problem at hand is to just float both your elements left. You can see an updated fiddle working in Safari:
Working example
I have edited your fiddle for it to work. I essentially just added float: left; to your #container. You can look at my edits for further details. http://jsfiddle.net/aaQSD/8/