The guy who created the website for my church said there is no way to fix the issue and that we shouldn't worry about it. But I think he's wrong and I'm attempting to fix it myself. My coding background is in C++ and Cobol but not really in CSS. I'm learning though, so any help here would be great.
The site uses Joomla and is here: http://www.anointedesign.com/mtvernon/site2/
It looks good in Firefox and Chrome but in Internet Explorer there is a huge gap at the top between the top header box and the slide show. I believe this is an IE issue in the way it handles negative margin values but I may be way off here and need help.
The entire top nav, logo and seal should be very close to the slide show, to the point where the left seal should overlap the slide show by about 15px.
This css code will fix it:
#horiz-menu {
float: left;
width: 100%;
margin-bottom: -110px;
}
#header-bg > div.wrapper {
clear: both;
}
#showcase-section {
margin-top: 0;
}
The problem is caused by floats and clears inside the horiz-menu div. IE doesn't like divs with that kind of CSS code. :)
Related
Hi I am building a store on Volusion, and can't figure this problem out. The issue is that in IE, Chrome, Safari, my padding for search_refinement_filters is looking fine, but in Firefox, they are being pushed about 350 px to the right. Check out the Firefox CSS issue here
Please let me know if you can help! I have tried moving search_refinement_filters from the content div to content area, but unfortunately I wasn't able to configure that to work either.
Thanks!
It's due to the left padding and left margin on #search_refinement_filters. You also have some weirdness with the absolute positioning. You may want to add position: relative to #content.
Take a look at Firebug. It is a convenient tool for analyzing code in Firefox.
Just add following styles to your #search_refinement_filters div. Remove others.
#search_refinement_filters {
position: absolute;
top: 100px;
left: 232px;
width: 700px;
}
And then apply position: relative to your #content div.
#content {
position: relative;
}
As 2C-B said #search_refinement_filters has left padding and left margin. These can be removed or overridden to prevent the issue with the styling.
You should definitely get Firebug for Testing purposes if you don't already have it.
Get it here: https://getfirebug.com/
It is an invaluable tool for debugging html, css, and javascript problems.
Hope this helps.
I am trying to position a Twitter and Facebook image next to my portrait on my website but in order to get the positioning correct i have to use divs. The problem is that when i add a div to the image and a link to it the div makes the image unable to be clicked and go to the link. I can't get rid of the divs because its the only way for my images to be positioned correctly. I will post a JSfiddle below with the code.
JSFiddle: http://jsfiddle.net/HeyItsProdigy/RVUhV/
Area of issue : <div id="facebook"><img src="fb.png" height="101" width="101" />
The problem isn't exactly as you describe. The issue is that your positioning is causing your Twitter element to overlap the others, which makes them un-clickable.
There's unfortunately not an easy solution. I think you're going to have to rethink your whole CSS structure, including eliminating the deprecated <center> tags to figure this one out. Good luck.
Use z-index:
#twitter {
position:relative;
bottom:290px;
left:168px;
z-index: 1;
}
#facebook {
position:relative;
top:83px;
right:168px;
z-index: 5;
}
jsfiddle
However, this type of CSS styling shouldn't be used in this manner. Using rules such as top, left, bottom, right etc should rarely be used for positioning, unless using absolute positioned elements.
You should look into using margin and padding as well as display properties for positioning your divs. Much of this code can be taken out.
I'm very sorry to tell you, but the answer is: do a modern HTML tutorial!
You should try Code Academy they have interactive course for beginners and intermediates with direct feedback. It seems you got stuck with an old HTML 3/4 book which won't do you any good.
But I also got an direkt answer for your link problem: this fiddle where you include the images as background-images and by using your classes and selectors efficiently you have to write(mostly copy+paste) very few lines if you want to add something.
You do the most with this CSS part:
.socialmedia a {
display: block; /* Because the image is probably higher than the text */
height: 50px; /* you have to set it to block and height 50px to show the image */
padding-left: 55px; /* make room for the background image(50px) and extra margin(+5px) */
padding-top: 12px; /* center in the middle of the image */
padding-bottom: 12px;
text-decoration: none;
}
Example g+:
CSS:
.g a {
background: url(logo_g_50x50.png) no-repeat;
}
HTML
<li class="g">+1 me on g+</li>
and done!
It's easier to read and even easier to maintain for later reuse or additions
This is the first site I have built with Gumby and I am something of a beginner when it comes to web design in general.
I have been scratching my head for hours now about why my site shows up perfectly in Firefox and Safari, but is a chaotic mess in Chrome. It looks like every set of columns are showing up as block elements, whilst the navbar isn't showing up at all...
I ran it through the W3C html validator and it informed me that the hgroup tag has been abolished, but that shouldn't mess up the page so much, should it? And most of all, not only in Chrome?
Possible causes:
In an effort to make the site non-responsive while I develop that aspect of things, I removed the breakpoints and messed with some of the settings in _var.scss / Probably the most likely reason but I don't know what is affecting it in this way.
I've used the row as a wrapper around the header and section parts.. Could this be messing with the way columns are displayed somehow?
In the header part I used #include columns(6) to include the columns in the html without creating another div. Does Chrome not like this?
This is the link to my site: http://work-in-germany.eu/
As you can see, it looks fine in Firefox and Safari, but not in Chrome.
THANK YOU so much for any help!
Tom
Wow, it really is a mess in Chrome! But not unmanageable.
First of all, you should wrap the whole page. This to center the content. For example:
HTML:
<body>
<div id="page_wrap">
-- Your content (rows etc.)
</div>
</body>
CSS:
.page_wrap {
margin: auto;
width: 980px;
}
As for the rows. Add the following to the css classes:
CSS:
.index_section .row {
overflow: hidden;
padding: 15px 0;
}
.index_section .img_box img {
float: left;
margin: 0 15px;
max-width: 280px;
}
Sorry, due to lack of time this was all I could do right now. Good luck!
I'm working on a website for a friend of mine and I'm having a bit of a CSS nightmare. The URL is http://www.bike4haiti.com.
In Firefox and Chrome, there is a Haitian flag that appears in the top right corner of the top banner. In IE, however, it appears as a thin vertical line along the right edge, beginning at the top of the menu and descending past where the content section begins. The CSS class is quite simple code:
img.rightfloat
{
float:right;
padding-left:1px;
padding-bottom: 1px;
padding-right: 5px;
padding-top: 1px;
}
My guess is that it is one of the other CSS elements causing the problem, but I have no idea which one. I tried using the F12 tool, but I had no luck finding the problem.
Help please!
set your first anchor to float:left; you already have the image floating so then just clear them with #topmenu{float:none; clear:both}
that should do it. you'll probably want to tinker with margins for spacing.
You have a your width set to nothing (width="") in your <img> tag.
If someone can please help I am having an issue with my site in IE7. Go to this link
Testing page link
When you load the page then hover over one of the top nav links the Footer shoots up half the distance on the page and can only be reset by rolling over another tab on the right.
What the heck is going on? Is this a DOCTYPE or CSS problem? Here's what I've already checked
Doctype
CSS styles for image height and width to see if its releasing some kind of height (I dont know)
Duplicate css styles
Any help would be awesome THANKS
Just add:
overflow:hidden
to #nav a
Btw there are some better, pure css rollover techniques, just in case you didn't know
this has a strange smell to it (from your CSS file):
.rollover { display: block; cursor: pointer; }
/* Allow setting widths and heights */
.rollover img { width: 100%; height: 100%; border: 0; }
/* only set width and height once */
.rollover:hover { visibility: visible; /*for IE */ }
/* sets any property for the :hover state */
.rollover:hover img { visibility: hidden; }
i would fool around with this here, maybe getting rid of the visibility hack...
if you want to make something not show, use display: none; instead of visibility: hidden;
EDIT: While this may or may not be a solution, I used to put endless comments in my source code so that I "knew where I was" when I was developing. One day I came across a strange error in IE that was generated by the use of a strange combination of comments. After I got rid of all my comments, the error was gone... I'm not saying, I'm just saying... maybe worth a shot...
I wanted to add comment. But, I dont have any points to add comment. Thats why adding it as answer.
I am using IE8. I have opened the link you have given in IE8 and I haven't noticed what ever you mentioned. It is working fine... If possible, you can try using IE8.
Thanks,
Srikrishna.
Really strange issue...
I was just curious about your float: left; property on #footer, and after i deleted that it seemed to work. Give it a try...
hope it helps.
Sinan.