Hi i'm pretty new to web development and have just recently finished my first attempt at web design. I've stumbled across one issue i can't find a solution to however. In webkit-browsers one of my ul-lists (navigation) initially renders in the wrong place. When i click on one of the links it pops back in the correct position again. Full site: stenius-online.com
header ul {
float: right;
padding-top: 16px;
font-size: 145%;
}
header li {
padding-right: 58px;
text-decoration: none;
}
On your site you have a link immediately preceding your <ul>. Make that link float:left; that should solve the problem.
Related
I really like how the FAQ page/questions look on the site I'm building using Squarespace. The only issue is that because of this structure, it also leads to a cumbersome drop down menu when you hover over the FAQ tab on the main navigation.
Here's a link: http://www.officialjerky.com/faq-1/
While it's certainly possible to set up anchored links in another FAQ page, I'm also sure there's a solution that will allow me to keep the structure of the page(s) and get rid of the drop down. Perhaps a bit of custom CSS that could make the drop down invisible?
There was a similar help thread that asked how to change the spacing between the items in the drop down, and the custom CSS input solution was: .primary-nav .folder-links-wrapper li { line-height: 0em; }.
Any guidance or input is really helpful. Thanks.
It's controlled by JS, so you may need a mini sledgehammer to override it. Try this in your CSS:
.subnav {display: none !important;}
Ideally, remove the script that is causing the behavior.
Regarding the + on small screens, on line 9865 of the stylesheet there is this:
#sidecarNav .folder label:before {
content: '+';
padding-right: .25em;
width: .75em;
display: inline-block;
}
You could either remove that code, or just add this to the stylesheet:
#sidecarNav .folder label:before {
display:none !important;
}
I'm trying to put a dropcap in a paragraph by using a . I think I found the correct workflow and tested it already in another area of my website, it worked great. When I want to apply the same technique to the desired paragraph, the content, the first letter of the paragraph, changes when viewed in browser to "03/". I've tried several different options but always same outcome.. When I inspect element in chrome, it shows "03/" as content, which is not correct. Does anyone know what might cause this?
css:
#services .firstcharacter { /*displays /03 instead of character*/
float: left;
color: #000;
font-size: 75px;
line-height: 80px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
font-family: Georgia; }
html:
<p><span class="firstcharacter">N</span>ulla...</p>
paragraph screenshot
Thanks!
EXTRA INFO
At first I removed #services, but no changes.. Afterwards I wrote code differently like this:
CSS
.service p.char a{
float: left;
color: #000;
font-size: 75px;
line-height: 80px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
font-family: serif;
}
HTML
<p class="char"><a><span>D</span></a>ulla...</p>
But nothing changed.
When I inspect the element in browser (chrome), the span's content has changed to 03/. But when I change it there, the character "D" or whatever is displayed correctly.
Can't really see where this error might be.. I checked my entire code for the "03/" combination as well and changed font settings, but no luck there either.
As I don't know full code, I can only suggest you removing #services from css. Or add <meta charset="UTF-8"> to <head>. Or both.
By dropping the in html, I solved the problem..
Now I have my solution, but would still like to know why this happened.
Thanks for the replies and for helping me find the cause.
I'm working on a project to upgrade a system to use the button tag rather than regular submit buttons. For the formatting of the buttons, I have the following CSS classes:
button::-moz-focus-inner {
border: none; /* overrides extra padding in Firefox */
}
button {
background: transparent url('images/greenrightbutton.png') no-repeat scroll top right;
color: #FFFFFF;
display: block;
font: normal 12px arial, sans-serif;
height: 25px;
padding-right: 8px; /* sliding doors padding */
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin: 0px;
text-decoration: none;
border: 0px;
overflow: visible;
}
#loginbox button {
float: right;
}
button span {
background: transparent url('images/greenleftbutton.png') no-repeat top left;
display: block;
line-height: 18px;
padding: 4px 5px 5px 12px;
margin: 0px;
border: 0px;
}
They work absolutely perfectly in every browser except IE8.
In IE8, the buttons work in most places, but then I find a page where the two background images don't quite line up and no amount of tweaking padding, line spacing etc fixes it.
Does anyone know why this might be the case?
Demo page: http://test6.placement.co.uk/demo/test.asp
---Update---
After some fairly extensive testing and trying things, I've now got a pretty fair idea of what's causing the problem in page 1, but no idea how to fix it, while another page with the same issue has a completely different cause (which I haven't found) but where I HAVE stumbled on a fix...
The problem on the first page appears to relate to a ul entered further up the page. Take that out and everything behaves - unfortunately, that's not an option as the ul is part of user-entered content, so I'm scratching my head about that. Particularly given...
Page 2 has no uls to cause an issue, but randomly sticking two break tags in just before my button code resolves the problem.
Naturally, THAT fix doesn't work on page 1.
I'm just about ready to give in and find some alternative way of rendering these buttons, because whatever the actual problem is, it's clearly so deep in either my CSS or my basic HTML that I'm probably never going to find it.
I don't see any difference between IE8 and other browser. Could you pleas mention bit more clear what you want to do?
http://cargocollective.com/joingateillustration
Hi everyone, this is my site I am developing and I have managed to add my twitter feed to my page however I cant add a line break before each tweet, Ive searched here and people have posted answers to a similar post but this doesnt seem to affect mine, can anyone help?
You could add a top margin to your tweet list items:
#twitter_update_list li {
list-style: none outside none;
width: 150px;
margin-top: 10px;
}
Something like this?
#twitter_update_list li span
{
padding-top:10px;
}
Hi I am developing a simple application based upon ASP.NET MVC. I have altered the default master.css to my have my own styles. Now the only problem is that i am adding background-image property to my one of my UL->Li->A to create menus. It is working fine in firefox but the images are not showing up at all in Internet explorer (IE7/8).
Does anyone has clue what is going wrong ?
my CSS is following;
#nav-menu ul
{
list-style: none;
padding: 0;
margin: 0;
color:White;
}
#nav-menu li
{
/*float: left;*/
margin: 0.15em 0.15em;
display:block;
}
#nav-menu li a
{
background-image: url('/Images/leftbarlightblue.jpg');
background-repeat:no-repeat;
background-position:bottom;
height: 2em;
line-height: 2em;
width: 12em;
display: block;
text-decoration: none;
text-align: center;
color: white;
}
#nav-menu li a:hover
{
background-image: url('./Images/leftbardarkblue.jpg');
background-repeat:no-repeat;
background-position:bottom;
height: 2em;
line-height: 2em;
width: 12em;
display: block;
color: white;
text-decoration: none;
text-align: center;
}
#nav-menu
{
width:15em
}
while XHTML is
<div id="menucontainer">
<div id="nav-menu">
<ul>
<li><%= Html.ActionLink("Home", "Index", "Home")%></li>
<li><%= Html.ActionLink("About Us", "About", "Home")%></li>
</ul>
</div>
</div>
Yes i tried with ./Images/... but it still not worked.
Following is my hierarchy of folders
Solution -> Content
Site.css
Images
logo.jpg
leftbarlightblue.jpg
->Controllers
-> Models
->Views
Home
Shared
Site.Master
your stylesheet needs to use the literal path as follows:
background-image: url('/Content/Images/leftbarlightblue.jpg');
and not
background-image: url('/Images/leftbarlightblue.jpg');
If your working with CSS a lot I really recommend getting FireFox and FireBug, it will enable you to look at your stylesheets on the fly and see exactly why certain things aren't working.
Next have you double checked that the URL is correct for the image? A quick way of checking is to get the absolute URL (browse to it in the browser to be sure, it should be something similar to http://myapp/content/images/leftbarlightblue.jpg) and place that in your code instead of your old image URL. If that loads then it is probably your relative paths are wrong (the ../ part), because I don't know your folder structure I cannot help you with what it should be.
On a seperate note background-position should have the horizontal position followed by the veritcal position.
background-position: left bottom;
I guess the display depends on the url.
Where is your master.css located?
Have you tried url('Images/leftbarlightblue.jpg') instead?
I Got the issue, the images were created using CMYK. So FF was showing them using approximate colors while Internet explorer was totally ignoring them. Changing the format solve the issue. Thanks for your help guys.
Add the XHTMLfor #nav-menu, also if you have a live link of this problem post that as well
Try starting the image paths without all the extra dot's and slashes. For example:
/images/image.jpg
Instead of
../../images/image.jpg
I'm still not sure how the files are stored on your actual webserver so you may need to add a directory or two but usually it is not wise to use dot's to tell the server how many levels up to go in the directory tree (plus a lot of people forget that you need to specify where the image is as seen from the CSS file's location not necessarily the HTML/ASP file's location)