i'm creating a simple page which have the following look
so as it shows in IE the the top div (the tabs div) is perfectly viewed with the down (body) div but in google chrome the top div (the tabs div) is one or two pixels to the right and i don't know why?
I would recommend boning up on the CSS Box Model for the different browser types.
http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/
Your problem is the padding or the border in navigation bar section.
Try adding this in the beginning of your css styles
* {
margin:0;
padding:0;
}
Related
Actually I am creating a border around my website in TYPO3 (version 7.6.14). I am creating this whith three border pictures (one for top, one for bottom and one for the left and right side) and it still workes fine at "normal" pages.
Only the border for the left and right side is created by css and the two others in the template. The whole page is surroundet the div "website".
Now I added a "Grid Element" to the main page. This is also in the website div included. Only the border is not shown at the Grid Elements part and non of my tries workes.
My css code is the following one:
div#website {
width:1200px;
text-align:left;
position: relative;
background-image:url(images/border_lr.jpg);
background-repeat:repeat-y;
background-position:left;
}
I know that the pixel methode is not the best way, but it should not be the problem, I even changed this and tryed to resize the other content, but it did not helped. The border is not in the background, it is just not created at the Grid Elements part of the website.
Why not use the :before and :after pseudo-elements?
I created a landing page with Wordpress and I inserted this basic HTML code at the bottom of it :
<p> שיווק דיגיטלי createak כל הזכויות שמורות</p>
I apologize for the foreign language. :-)
I have always used this code, but for some reason now it's unclickable on this specific landing page: http://mickeyberkowitz.com/.
I have no idea why it's happening, any suggestions?
It looks to me like a CSS rule is making the container element for the final section (footer?) fixed, since there is no rule to hide the overflow-y the images show up fine however, the link is actually behind those images.
The CSS rule below fixes the container to 100vh however the content inside the container is much "taller" and so that overflows down. Your link is positioned directly under the parent element of the container and because the height of the offending container is fixed, it doesn't move down.
#media (min-width: 768px)
.elementor-section.elementor-section-height-full {
height: 100vh;
}
If you changed that CSS rule to the one below you'll see an improvement:
#media (min-width: 768px)
.elementor-section.elementor-section-height-full {
min-height: 100vh;
}
You will then notice the large space between the bottom of the "trophy" image and button - this appears to be a "spacer" element probably created by a page-builder plugin. I'd remove this if I were you. In fact, there appears to be another spacer below that as well, these create blank space that you may want to remove - depending on the desired aesthetics of the site.
I checked in your site. This is because, in your code other divs and elements are show over <div id="footer-bottom">
You need to add following code in CSS
#footer-bottom{
z-index:9999;
position:relative
}
This is a quick Fix.
But this may make other things non-clickable. So you need to adjust all your html divs and code properly with CSS.
Please use google chrome or firefox developers tool or inspect your code and fix divs that are overlapping each other.
in our website:
http://www.herzfit-service.de/
can tell one help me why in safari on mac
The black triangle below the logo on the left doesn’t appear, and the note on top of the people bubbles on the left is to close to the black header. Seems like it disappears behind it.
I don't have a mac but one of the workers sent me a screenshot:
The problem occurs in any browser when it's resized to about 1366px or below.
The header element becomes taller, which hides the triangle and div w/ the class "interview" (the people on the left).
The easiest fix is probably to have the mobile menu appear around 1366px to avoid the menu items crowding the header bar. Or you can try media queries to set extra top margins on the elements that are disappearing.
If you are not a developer I suggest hiring one for these fixes!
Remove the following CSS style in your CSS file :style.css?ver=4.2.2
Line No:3475
.header-main {
padding-right: 0;
}
Remove this CSS style add check it in all browser it will work....
So I'm aware that this is a confusing question. Basically, I've got two divs at the top of the page that include navigation and a search bar.
I have a full container
#containPage
width:1000px;
margin:0 auto;
}
for the page that is fixed width. This doesn't end until the end, I think, and there are two smaller containers for a layout, both float right and left.
When I resize the page in a browser, the layout at the top moves and changes the positioning, which I don't want to happen.
Any ideas?
here is the link: it's being even screwier right now and has the navigation links way to the right, so maybe someone could help with that too.
http://www.sophisticatedmoose.com/nerdery/
Resizing horizontally in Chrome and Firefox for Mac. If you scroll to the right, I'm supposed to have a nav bar underneath the search page with home, about, news, and contact. Last I checked- and I'm clearing the cache - it was waaay off on the left along with the footer.
Working on an image. I need reputation 10 to put one in. I've got it though.
You have this odd construct in your CSS:
#containPage { /*page I am in you*/
width:223%;
margin:0 auto;
}
The margin setting is fine and sensible but the width is rather, um, strange. The #containPage element is, essentially, the entire page so it is naturally as wide as the browser window, then the 223% is applied and the page itself becomes more than twice as wide as the browser window. Then, all the block elements that are immediate children of #containPage will be over twice as wide as the window unless you specify or imply a width in some other way.
In particular, the #NavRRT element will be too wide and the menu inside #NavRRT will float to the right all the way out of the window and you'll have to scroll horizontally to see it. Similar positioning strangeness happens with #footer.
Start by getting rid of the width:223% on #containPage. The page looks fine in Safari and Chrome if I turn off just that single piece of CSS.
UPDATE: You might want to add another <div> inside #containPage, then add max-width, min-width, and margin: 0 auto to that to keep the main content centered and reasonably sized. Everything that is currently inside #containPage would go inside this new <div>. If you go with this approach then you probably won't need any CSS at all on #containPage, it would just need to be around to help center the "real" page.
You have to remove the margin-left from your nav LIs (it's inherited from li) and remove their widths.
#nav li { margin-left: 0; width: auto !important; }
How can I extend a div to the bottom of the page? Let's say I have a div that starts at the top, and has a background image I want repeated to the bottom of the page. How would I go about doing this?
Live example found here: http://mibsolutionsllc.com/ecgridos/about/ with the #content div.
Switch it around, have the background for your content as the body tags back ground then over lay the header over the top of it via a div or other element :)
CSS Sticky Footer does something similar, they've got a solution that seems to work on a whole range of different (including very old) browsers. If you don't need the footer you can always still use their solution and set the footer height to 0px.