I have a site that was done in Joomla here (I'm not very familiar with Joomla, but I have had to learn it quickly) and looks great in all browsers, except IE7.
The problem is that the top menu doesn't render in IE7, and thus all the CSS after the menu breaks. I know that it's at least partially loading because some of the styles are loading (the background, colours and type), but the main container and other divs aren't rendering.
I suspect that either IE7 is not reading the correct style sheet (there are 4 - one for nomal, one for IE7, one for IE6 and one for printing) and may be trying to implement two at the same time?
I have no more ideas for how to find the problem, so I'm hoping that either someone else has had this problem or knows how to fix it.
I have included a link to the home page of the site, but if you need more information in order to help me, just let me know.
Thanks in advance.
I skimmed through some of your CSS, and I found this section in template.css:
/* begin Logo */
div.art-logo {
display: block;
position: absolute;
left: 10px;
top: 20px;
width: 500px;
}
h1.art-logo-name {
display: block;
text-align: {
HorizontalAlign
}
;
}
h1.art-logo-name, h1.art-logo-name a, h1.art-logo-name a:link, h1.art-logo-name a:visited, h1.art-logo-name a:hover {
font-size: 26px;
text-decoration: none;
padding: 0;
margin: 0;
color: {
NameFontColor
}
!important;
}
h2.art-logo-text, h2.art-logo-text a, h2.art-logo-text a:link, h2.art-logo-text a:visited, h2.art-logo-text a:hover {
font-weight: normal;
font-size: 18px;
padding: 0;
margin: 0;
color: {
TextFontColor
}
!important;
}
h2.art-logo-text {
display: block;
text-align: {
HorizontalAlign
}
;
}
/* end Logo */
At a guess, I'd say that the bits like this:
{
HorizontalAlign
}
;
should be this like this instead:
{HorizontalAlign};
and then Joomla will replace the placeholder. (I don't know Joomla, I'm just guessing it will)
If not, try text-align: center instead.
If that still doesn't fix it, you should look through all of your CSS for more instances of the same mistake.
Related
So I am playing around with someone's codepen and wanted to add some arrows from fontawesome to the code.
I was able to add the arrow with the following code:
.button:first-of-type:before {
content: "\f100";
font-family: fontAwesome;
color: #000;
font-size: 1em;
z-index: 10;
margin: 20px 0 0 -75px;
position: absolute;
}
This works, but when someone hovers the button, I want the before css to be display none.
I have tried the following but it doesn't work:
.button:before:hover:first-of-type {
display: none;
}
and
.button:first-of-type:before:hover {
display: none;
}
and
.button:first-of-type:hover:before {
display: none;
}
I have also tried to add !important but nothing works.
Here is a link to the codepen: http://codepen.io/bskousen/pen/tgJdH
Your solution might be
.button:hover::before{
content: "";
}
So instead of hiding the :before, simply remove it.
One more thing, it looks like when you hover the left arrow, the upper button activates, you might want to check your code.
This is the right one
.button:first-of-type:hover:before {
display: none;
}
I'm trying to reverse engineer the menu on this web page (this is just a personal project, not trying to steal their work).
http://clapat.ro/themes/eleven/color/
However, I can't seem to get the transition effect to work. When I add the border-top on, it's pushing the content of the down instead of staying nicely in-line like in the example.
Also, the border seems to "blind" upwards, but when I do it, it blinds downwards.
Any help would be greatly appreciated!
This is causing the problem:
.nav > li > a {
display: block;
}
which is coming from bootstrap.css If you remove that bit of CSS it works correctly.
You can override that style in index2.php by adding display: inline;:
.navbar a, .navbar a:active, .navbar a:visited {
color: #7f7f7f;
padding-top: 35px;
height: 90px;
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
padding-bottom: 45px;
display: inline; /* added this line */
}
I have built a navigation list for a client and they opted to use the [Oswald]() font-face.
Now when the user scrolls over the link a navigation arrow will pop up to the side indicating which link is currently click, it is NOT supposed to turn orange upon hovering. I have removed any javascript and the fontface entirely and still can not remove the problem.
Here is a screenshot of the issue http://cl.ly/043a0q0o0Q392q2m1k20
My CSS (SASS) is as follows:
#leftnav {
width: 205px;
float: left;
ul {
li {
border: 1px solid #fff;
border-top: 0px;
background: #cc5816;
padding: 3px 10px;
#include gradient($top_color: #d86c07, $bottom_color: #bb5e06);
a {
position: relative;
font-family: $main_bold_font;
font-size: 16pt;
color: #fff;
text-decoration: none;
text-shadow: $text_shadow;
}
a:hover { #extend a; }
a:visited { #extend a; }
}
}
}
Any Ideas?
I dont know for sure if this solves the problem. But, as stated here, I would recommend to change the order of :hover and :visited to be :visited and :hover. Maybe it helps to analyse the compiled css.
I made a new website and my problem is that the menu is ok in FF and other browsers, but not in IE.
The problem is, it wont list the list elements, no hover , no color, and not inline.
here is the code
nav {
margin-top: 15px;
}
nav ul {
position: relative;
left: 297px;
}
nav li {
float: left;
padding: 0 20px;
font-size: 12px;
line-height: 65px;
background: url(images/line.png) no-repeat right 10px;
height: 72px;
text-transform: uppercase;
}
nav li a {
color: #656464;
text-decoration: none;
display: block;
}
nav li:hover {
background: url(images/hover.png) repeat-x 0 35px;
color: #242424;
}
could please someone could give me a hint?
nav is an HTML5 element; old IEs will not recognize it and thus won't apply your styles.
To make IE recognize HTML5 markup, place the HTML5 shiv on your page, then declare a rule for nav and any other HTML5 elements you use, giving them a display: block style, just above the CSS that you have now.
<nav> is fine to use on a page, but you will run into problems with it when you try and style it as many browsers simply skip the tag if they don't understand it.
Wrap the <nav> tag in a wrapper div and style that instead, and strip away any styling from the semantic tags so they are naked.
What are the most useful media="print"-specific, cross-browser-compatible CSS properties?
I think we have these 5 properties for print specific.
page-break-before
page-break-after
page-break-inside
widows
orphans
Please explain when and where to use these? Which are cross browser compatible? and what are other common CSS properties can be useful in print, other than display:none?
I use the famous A list apart article (CSS Design: Going to Print) and this article when I need to make a printable version of a page. There are some common tags, but a lot depends on the css model (as well as container padding and margins) you are using:
body {
background: white;
font-size: 12pt;
}
#menu {
display: none;
}
#wrapper, #content {
width: auto;
margin: 0 5%;
padding: 0;
border: 0;
float: none !important;
color: black;
background: transparent none;
}
div#content {
margin-left: 10%;
padding-top: 1em;
border-top: 1px solid #930;
}
div#mast {
margin-bottom: -8px;
}
div#mast img {
vertical-align: bottom;
}
a:link, a:visited {
color: #520;
background: transparent;
font-weight: bold;
text-decoration: underline;
}
#content a:link:after, #content a:visited:after {
content: " (" attr(href) ") ";
font-size: 90%;
}
#content a[href^="/"]:after {
content: " (http://www.alistapart.com" attr(href) ") ";
}
I use the following:
/* Browser will TRY to avoid spanning content within across a page */
tr, td, th {page-break-inside:avoid}
/* Repeat table headers when table spans a page */
thead {display:table-header-group}
/* Apply to anything you don't want to print */
.NoPrint {visibility:hidden; display:none}
Chris Coyier at css-tricks.com wrote a great article on this:
http://css-tricks.com/css-tricks-finally-gets-a-print-stylesheet/
In the spirit of sharing, here's a couple of rules I regularly use. They fit in well with SemanticUI, but may be helpful elsewhere
[class*="printed only"] {
display: none;
}
#media print {
.printed {
display: initial !important;
opacity: 1 !important;
}
[class*="non printed"] {
display: none !important;
opacity: 0 !important;
}
}
Display on screen and print
Use class="printed". This is handy when you have tabs in your UI, so you can force them to be printed even if they aren't currently being displayed
Display on screen but don't print
Use class="non printed". This is handy for navigation elements and other stuff you don't want to print
Don't display on screen but print
Use class="printed only". I find it handy to include some metadata about a webpage on the printed version that might be irrelevant to the web version - eg the date/time the page was generated, the username of the person that printed the document, a link (if removed from headers) and soforth.